section.gt-block.color-variants {
padding: 10rem 0;
}
@media screen and (max-width: 600px) {
section.gt-block.color-variants {
padding: 6rem 0;
}
}
.color-variants-items {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5rem;
}
@media screen and (max-width: 1024px) {
.color-variants-items {
gap: 3rem;
}
}
@media screen and (max-width: 530px) {
.color-variants-items {
grid-template-columns: 1fr;
gap: 5rem;
}
}
.color-variant-item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 4rem;
}
@media screen and (max-width: 1024px) {
.color-variant-item {
gap: 2.5rem;
}
}
.color-variant-item__big-image img {
border-radius: 2rem;
}
.color-variant-item__text p, .color-variant-item__text ul, .color-variant-item__text ol {
font-size: calc(var(--fs-small-rate) * 2rem);
line-height: 1.5;
}
.color-variant-item__small-images {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
@media screen and (max-width: 640px) {
.color-variant-item__small-images {
gap: 1rem;
}
}
.color-variant-item__small-image {
width: 100%;
aspect-ratio: 278/200;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
overflow: hidden;
}
.color-variant-item__small-image:nth-of-type(n+3) {
display: none;
}
.color-variant-item__small-image img {
border-radius: 2rem;
max-width: initial;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}