.thanks-hero_container {
position: relative;
.img-container {
height: auto;
width: 100%;
margin: 146px 0 196px 0;
.img-web {
display: block;
height: 100%;
width: 100%;
object-fit: cover;
}
.img-mobile {
display: none;
}
}
.content_container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 625px;
width: 100%;
text-align: center;
justify-content: center;
align-items: center;
.para-primary {
max-width: 450px;
width: 100%;
margin-top: 8px;
margin-inline: auto;
}
#redirect-cta {
margin-top: 42px;
a {
text-decoration: none;
color: var(--text-arcon-red);
}
}
}
@media screen and (width <=1024px) {
& {
.img-container {
margin: 93px 0 155px 0;
.img-web {
display: none;
}
.img-mobile {
display: block;
height: 100%;
width: 100%;
object-fit: cover;
}
}
.content_container {
width: 90%;
top: 100%;
#redirect-cta {
margin-top: 40px;
}
}
}
}
} .trustedContainer { margin-block: var(--spacer-120);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 60px;
.top-container {
width: 100%;
height: auto;
display: flex;
justify-content: space-between;
align-items: start;
h2 {
margin-inline: auto;
}
}
.bottom-container {
width: 100%;
height: auto;
border: 1px solid var(--bg-grey2);
border-radius: 12px;
display: grid;
grid-template-columns: repeat(6, 1fr);
justify-content: start;
align-items: center;
.client {
position: relative;
max-width: 215px;
width: 100%;
height: 85px;
border-right: 1px solid var(--bg-grey2);
img {
position: absolute;
max-width: 98px;
width: 100%;
max-height: 33px;
height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
filter: grayscale(1);
}
&:last-child {
border-right: 0;
}
}
}
@media screen and (max-width: 1025px) {
& {
margin-block: 80px;
gap: 32px;
.top-container {
flex-direction: column;
gap: 24px;
h2 {
margin-inline: unset;
}
}
.bottom-container {
grid-template-columns: repeat(3, 1fr);
.client {
height: 60px;
border-bottom: 1px solid var(--bg-grey2);
img {
max-width: 68px;
width: 100%;
max-height: 23px;
height: 100%;
}
&:nth-child(3) {
border-right: 0;
}
&:nth-child(4),
&:nth-child(5),
&:nth-child(6) {
border-bottom: 0;
}
}
}
}
}
@media screen and (min-width: 601px) and (max-width: 1024px) {
& {
.bottom-container {
.client {
max-width: 100%;
}
}
}
}
}