.warranty-terms--page { .hero { .bg { background-image: url('/assets/img/warranty-terms/hero.jpg'); } } .s1 { .term { display: flex; flex-direction: row; flex-wrap: wrap; background: #fff; height: 100%; @extend %defaultBorderRadius; @extend %defaultBoxShadow; overflow: hidden; .imgBox { flex-basis: 30%; display: flex; justify-content: center; align-items: center; height: 100%; img { width: 100%; height: 100%; object-fit: cover; } @media (min-width: 1200px) and (max-width: 1400px) { flex-basis: 40%; } @media (min-width: 992px) and (max-width: 1200px) { flex-basis: 20%; } @media (max-width: 768px) { flex-basis: 100%; height: auto; } } .txtBox { flex-basis: 70%; padding: 15px; @media (min-width: 1200px) and (max-width: 1400px) { flex-basis: 60%; } @media (max-width: 768px) { flex-basis: 100%; } h2 { margin-bottom: 20px; color: $theme; } p { margin-bottom: 15px; } } } } .s2 { text-align: center; direction: ltr; } .ck-content { border: 1px solid rgba(#000, 0.1); padding: 15px; @extend %defaultBorderRadius; } .submit { span { color: #fff; } } }