.terms-agreement {
padding: 40px 0;
background-color: white;
& * {
font-family: 'Mulish', sans-serif !important;
}
}
.terms-agreement__header {
display: flex;
row-gap: 32px;
flex-direction: column;
margin-bottom: 52px;
@media screen and (max-width: 1024px) {
row-gap: 16px;
margin-bottom: 30px;
}
& .terms-agreement__title {
font-size: 40px;
font-weight: 700;
line-height: 60px;
color: #1F4FCE;
max-width: 700px;
@media screen and (max-width: 1024px) {
font-size: 28px;
line-height: 35px;
}
@media screen and (max-width: 640px) {
font-size: 22px;
line-height: 29px;
}
}
& .terms-agreement__subtitle {
font-size: 20px;
font-weight: 400;
line-height: 28px;
color: #1B1B1B;
max-width: 540px;
@media screen and (max-width: 1024px) {
font-size: 16px;
line-height: 24px;
}
}
}
.terms-agreement__terms {
position: relative;
& .terms-agreement__background {
z-index: 0;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin-bottom: 20px;
display: block;
width: 918px;
height: 786px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
@media screen and (max-width: 991px) {
width: 100%;
height: auto;
aspect-ratio: 918 / 786;
}
@media screen and (max-width: 640px) {
display: none;
}
}
}
.terms-agreement__list {
padding: 0;
margin: 0;
list-style: none;
display: grid;
row-gap: 40px;
column-gap: 40px;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
@media screen and (max-width: 1024px) {
row-gap: 24px;
column-gap: 24px;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
@media screen and (max-width: 768px) {
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
& .terms-agreement__item {
margin: 0;
padding: 20px;
overflow: hidden;
position: relative;
display: flex;
row-gap: 20px;
flex-direction: column;
border-radius: 15px;
position: relative;
list-style: none;
min-height: 175px;
background-color: white;
@media screen and (max-width: 480px) {
min-height: 140px;
}
&.terms-agreement__item--grey {
--terms-agreement-item-title-color: #1F4FCE;
--terms-agreement-item-text-color: #1B1B1B;
--terms-agreement-item-count-color: linear-gradient(to bottom, rgba(64, 133, 217, 0.1), rgba(12, 62, 154, 0.1));
background-color: #E0E5ED;
}
&.terms-agreement__item--blue {
--terms-agreement-item-title-color: #FFF0F0;
--terms-agreement-item-text-color: #FFF0F0;
--terms-agreement-item-count-color: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(137, 137, 137, 0.1));
background-color: #1F4FCE;
}
&:empty {
background-color: transparent;
@media screen and (max-width: 1220px) {
display: none;
}
}
& .terms-agreement__name {
font-size: 20px;
font-weight: 700;
line-height: 25px;
color: var(--terms-agreement-item-title-color);
@media screen and (max-width: 1024px) {
font-size: 18px;
}
}
& .terms-agreement__text {
font-size: 14px;
font-weight: 400;
line-height: 20px;
white-space: pre-line;
color: var(--terms-agreement-item-text-color);
}
& .terms-agreement__num {
z-index: 0;
position: absolute;
right: -26px;
bottom: -30px;
font-weight: 700;
font-size: 200px;
font-style: normal;
line-height: 1;
display: block;
background-image: var(--terms-agreement-item-count-color);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
@media screen and (max-width: 480px) {
right: -10px;
bottom: -24px;
font-size: 160px;
}
}
}
}
.terms-agreement__description {
color: #FFF0F0;
background-color: #1F4FCE;
padding: 20px;
border-radius: 15px;
max-width: 850px;
margin-top: 40px;
position: relative;
display: flex;
row-gap: 15px;
column-gap: 50px;
flex-wrap: wrap;
align-items: end;
@media screen and (max-width: 768px) {
flex-direction: column;
align-items: start;
}
& .terms-agreement__descr-title {
font-size: 20px;
font-weight: 500;
line-height: 25px;
}
& .terms-agreement__descr-text {
font-size: 14px;
font-weight: 400;
line-height: 20px;
width: calc(100% - 252px - 50px);
white-space: pre-line;
@media screen and (max-width: 768px) {
width: 100%;
}
}
& .terms-agreement__descr-button {
width: 252px;
min-width: 252px;
display: inline-flex;
align-items: center;
justify-content: center;
height: 40px;
border-radius: 40px;
background: rgba(224, 229, 237, 1);
font-family: 'Mulish', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1;
text-decoration: none;
border: none;
cursor: pointer;
transition: transform 0.2s ease, opacity 0.2s ease;
color: inherit;
outline: none;
-webkit-appearance: none;
appearance: none;
box-sizing: border-box;
color: #1F4FCE;
@media screen and (max-width: 768px) {
width: 100%;
margin-top: 16px;
}
&:hover {
transform: translateY(-2px);
opacity: 0.95;
}
}
}