.articleHero .redboxContainer{display:flex;flex-direction:column;gap:30px}@media (min-width: 1100px){.articleHero .redboxContainer{align-items:center;flex-direction:row;justify-content:space-between}}.articleHero-title{color:var(--accent-color);font-size:2.125rem;font-style:normal;font-weight:600;line-height:normal}@media (min-width: 1100px){.articleHero-content{flex:0 1 485px}.articleHero-image{flex:0 1 770px}}.articleHero-subtitle,.articleHero-text{color:var(--basic-color);font-style:normal;line-height:normal}.articleHero-subtitle{font-size:1.5rem;font-weight:600}.articleHero-text{font-size:1rem;font-weight:400}.articleHero-info{display:flex;justify-content:space-between;align-items:center}.articleHero-share{list-style:none;padding-left:0;display:flex;gap:10px;align-items:center}.articleHero-share li{flex:0 0 15px}.articleHero-share li svg{width:100%;height:100%}.articleHero time,.articleHero-category{color:var(--secondary-color);font-size:.8125rem}.articleHero-category{font-weight:500;line-height:171%;padding:.125rem 1.3125rem;border-radius:40px;border:1px solid var(--secondary-color);margin-bottom:0}.imageText .redboxContainer{display:flex;flex-direction:column;gap:30px}@media (min-width: 1100px){.imageText .redboxContainer{align-items:center}.imageText .redboxContainer.left{flex-direction:row-reverse}.imageText .redboxContainer.right{flex-direction:row}}@media (min-width: 1100px){.imageText-content,.imageText-image{flex:1 1 50%}}.imageText-title{color:var(--basic-color);font-family:Gilroy;font-size:24px;font-style:normal;font-weight:600;line-height:normal}.imageText-text{color:var(--basic-color);font-family:Gilroy;font-size:16px;font-style:normal;font-weight:400;line-height:normal}.quote{text-align:center;padding:30px 0}.quote .redboxContainer{max-width:885px}.quote-text{color:var(--basic-color);font-family:Gilroy;font-size:34px;font-style:normal;font-weight:600;line-height:normal;position:relative}.quote-text:before,.quote-text:after{content:'"';display:block;position:absolute;color:var(--accent-color);font-size:120px;font-style:normal;font-weight:700;line-height:0}.quote-text:before{top:9px;left:-20px}.quote-text:after{bottom:-49px;right:-20px}.quote-author{color:var(--basic-color);font-size:12px;font-style:normal;font-weight:400;line-height:normal;display:flex;justify-content:center;align-items:center;gap:10px}.quote-author:before{content:"";display:block;height:2px;width:30px;background-color:var(--accent-color)}.strategy article {
border: 1px solid #d4dce7;
padding: 45px 33px;
display: flex;
align-items: center;
position: relative;
min-height: 358px;
container: right / inline-size;
}
.strategy-left {
flex: 1 1 50%;
position: relative;
z-index: 4;
}
.strategy h2 {
font-size: 34px;
font-weight: 600;
line-height: normal;
color: #da404c;
margin-bottom: 15px;
}
.strategy-ctas {
display: flex;
flex-direction: column;
gap: 13px;
}
.strategy-right {
display: none;
}
@container right (min-width: 1024px) {
.strategy-right {
display: block;
flex: 1 1 50%;
}
.strategy-right img {
width: auto;
position: absolute;
bottom: 0;
right: -30px;
height: 110%;
max-width: 310px;
}
.strategy .back {
position: absolute;
right: 0;
height: 100%;
top: 0;
width: 100%;
z-index: -1;
}
.strategy .back::before {
content: '';
display: block;
position: absolute;
clip-path: circle(70% at 100% 50%);
background-color: #da404c;
opacity: 0.05;
right: 0;
height: 100%;
top: 0;
width: 100%;
z-index: 2;
}
.strategy .back span {
position: absolute;
clip-path: circle(53% at 100% 50%);
background-color: #da404c;
opacity: 0.15;
right: 0;
height: 100%;
top: 0;
width: 100%;
z-index: 1;
}
.strategy .back::after {
content: '';
display: block;
position: absolute;
clip-path: circle(45% at 100% 50%);
background-color: #da404c;
right: 0;
height: 100%;
top: 0;
width: 100%;
z-index: 3;
}
}
@media (min-width: 768px) {
.strategy-ctas {
flex-direction: row;
}
}
.cta {
background-color: var(--rdbx-background);
border: none;
border-radius: 70px;
display: block;
width: -moz-fit-content;
width: fit-content;
padding: 0.75rem 1.5rem;
color: var(--rdbx-white);
font-weight: 700;
line-height: normal;
transition: background-color 0.3s ease-out, color 0.3s ease-out;
cursor: pointer;
text-decoration: none;
}
.cta:focus {
transition: none;
}
.cta.primary {
--rdbx-background: var(--rdbx-red);
}
.cta.primary:hover {
--rdbx-background: var(--rdbx-light-red);
}
.cta.primary:focus {
--rdbx-background: var(--rdbx-dark-red);
}
.cta.secondary {
--rdbx-background: var(--rdbx-dark-gray);
}
.cta.secondary:hover,
.cta.secondary:focus {
--rdbx-background: var(--rdbx-focus-secondary);
}
.cta.tertiary {
--rdbx-background: var(--rdbx-light-gray);
color: var(--rdbx-dark-blue);
}
.cta.tertiary:hover,
.cta.tertiary:focus {
--rdbx-background: var(--rdbx-focus-secondary);
color: var(--rdbx-light-gray);
}
a.cta:hover {
text-decoration: none;
color: var(--rdbx-white);
}