.hero {
padding: 50px 0px 20px;
}
.hero__wrap {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
gap: 20px;
}
.hero__content,
.hero__picture {
flex: 1 1 0;
}
.hero__content {
padding: 48px 24px;
height: 100%;
aspect-ratio: 1/1;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
border-radius: 24px;
background-color: var(--clr-blue);
}
.hero__article {
display: flex;
flex-direction: column;
}
.hero__title {
margin: 0;
font-weight: 600;
color: var(--clr-white);
}
.hero__article-title {
margin: 0 0 16px;
font-weight: 500;
color: var(--clr-white);
}
.hero__article-list {
margin: 0 0 40px;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 12px;
}
.hero__article-item {
color: var(--clr-white);
}
.hero__article-subtitle {
margin: 0;
font-weight: 400;
}
.hero__btn {
padding: 16px 32px;
align-self: start;
text-decoration: none;
}
.hero__picture {
aspect-ratio: 1/1;
overflow: hidden;
border-radius: 24px;
}
.hero__img {
height: 100%;
width: 100%;
display: block;
object-fit: cover;
}
@media screen and (min-width: 1440px) {
.hero {
padding: 60px 0px 20px;
}
}
@media screen and (max-width: 1280px) {
.hero {
padding: 40px 0px 20px;
}
}
@media screen and (max-width: 768px) {
.hero {
margin-top: 64px;
padding: 24px 0px 20px;
}
.hero__wrap {
flex-direction: column-reverse;
gap: 0;
border-radius: 24px;
background-color: var(--clr-blue);
}
.hero__content, .hero__picture {
flex: initial;
}
.hero__content {
aspect-ratio: initial;
gap: 40px;
}
.hero__picture {
padding: 24px;
}
.hero__img {
border-radius: 12px;
}
}
@media screen and (max-width: 430px) {
.hero__content {
padding: 24px 24px;
}
.hero__content {
gap: 20px;
}
} .calc {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
gap: 20px;
}
.calc__content,
.calc__table {
flex: 1 1 0;
}
.calc__content {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
gap: 50px;
}
.calc__content-wrap {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
gap: 16px;
} .calc__range {
display: flex;
flex-direction: column;
gap: 12px;
max-width: 560px;
}
.range {
display: flex;
align-items: center;
gap: 16px;
}
.range-slider {
flex: 1;
}
.range-input {
-webkit-appearance: none;
appearance: none;
width: 100%;
cursor: pointer;
outline: none;
border-radius: 999px;
height: 12px;
background: linear-gradient(
to right,
#007BFC 0%,
#007BFC 0%,
#CDE5FF 0%,
#CDE5FF 100%
);
}
.range-input::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
height: 24px;
width: 24px;
background-color: #007BFC;
border-radius: 50%;
border: 4px solid #ffffff;
box-shadow: 0 0 0 2px #007BFC;
transition: .2s ease-in-out;
}
.range-input::-moz-range-thumb {
height: 24px;
width: 24px;
background-color: #007BFC;
border-radius: 50%;
border: 4px solid #ffffff;
box-shadow: 0 0 0 2px #007BFC;
transition: .2s ease-in-out;
}
.range-input::-webkit-slider-thumb:hover {
box-shadow: 0 0 0 10px rgba(0, 123, 252, .15);
}
.range-input:active::-webkit-slider-thumb {
box-shadow: 0 0 0 13px rgba(0, 123, 252, .25);
}
.range-input:focus::-webkit-slider-thumb {
box-shadow: 0 0 0 13px rgba(0, 123, 252, .25);
}
.range-input::-moz-range-thumb:hover {
box-shadow: 0 0 0 10px rgba(0, 123, 252, .15);
}
.range-input:active::-moz-range-thumb {
box-shadow: 0 0 0 13px rgba(0, 123, 252, .25);
}
.range-input:focus::-moz-range-thumb {
box-shadow: 0 0 0 13px rgba(0, 123, 252, .25);
}
.value4 {
margin: 0;
color: var(--clr-black);
font-weight: 700;
width: auto;
text-align: left;
} .calc__picture {
position: relative;
width: calc((583px / 1440px) * 100vw);
height: calc((236px / 1440px) * 100vw);
}
.calc__img {
position: absolute;
display: block;
object-fit: cover;
opacity: 0;
transition: opacity .3s ease-in-out;
}
.calc__img.calc__img_visible {
opacity: 1;
}
.calc__img_1 {
height: calc((78px / 1440px) * 100vw);
width: calc((78px / 1440px) * 100vw);
top: 0;
left: calc((78px / 1440px) * 100vw);
}
.calc__img_2 {
height: calc((117px / 1440px) * 100vw);
width: calc((117px / 1440px) * 100vw);
top: calc((40px / 1440px) * 100vw);
left: 0;
}
.calc__img_3 {
width: calc((118px / 1440px) * 100vw);
height: calc((117px / 1440px) * 100vw);
top: calc((118px / 1440px) * 100vw);
left: calc((39px / 1440px) * 100vw);
}
.calc__img_4 {
height: calc((78px / 1440px) * 100vw);
width: calc((78px / 1440px) * 100vw);
bottom: 0;
left: calc((189px / 1440px) * 100vw);
}
.calc__img_5 {
height: calc((78px / 1440px) * 100vw);
width: calc((78px / 1440px) * 100vw);
top: 0;
left: calc((189px / 1440px) * 100vw);
}
.calc__img_6 {
width: calc((118px / 1440px) * 100vw);
height: calc((117px / 1440px) * 100vw);
top: calc((39px / 1440px) * 100vw);
left: calc((228px / 1440px) * 100vw);
}
.calc__img_7 {
width: calc((118px / 1440px) * 100vw);
height: calc((117px / 1440px) * 100vw);
top: 0;
left: calc((307px / 1440px) * 100vw);
}
.calc__img_8 {
width: calc((117px / 1440px) * 100vw);
height: calc((118px / 1440px) * 100vw);
top: calc((40px / 1440px) * 100vw);
left: calc((386px / 1440px) * 100vw);
}
.calc__img_9 {
width: calc((117px / 1440px) * 100vw);
height: calc((118px / 1440px) * 100vw);
bottom: 0;
left: calc((346px / 1440px) * 100vw);
}
.calc__img_10 {
width: calc((118px / 1440px) * 100vw);
height: calc((117px / 1440px) * 100vw);
top: 0;
left: calc((464px / 1440px) * 100vw);
}
.calc__img_11 {
width: calc((118px / 1440px) * 100vw);
height: calc((117px / 1440px) * 100vw);
bottom: 0;
left: calc((464px / 1440px) * 100vw);
}
.calc__result {
display: flex;
flex-direction: column;
gap: 12px;
}
.calc__result-title {
margin: 0;
padding: 10px 20px 10px 20px;
color: var(--clr-black);
font-weight: 700;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
justify-self: flex-start;
border-radius: 24px;
background: var(--clr-gray);
}
.calc__result-subtitle {
margin: 0;
color: var(--clr-black);
font-weight: 500;
}
.calc__table {
padding: 48px 24px;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
border-radius: 24px;
background: var(--clr-gray);
}
.calc__table-title {
margin: 0;
color: var(--clr-black);
font-weight: 500;
}
.calc__table-list {
margin-bottom: 60px;
width: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
}
.calc__table-item {
width: 100%;
padding: 16px 0;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
box-sizing: border-box;
border-bottom: 1px solid rgba(134, 141, 148, 1);
}
.calc__table-item:last-child {
padding: 16px 0 0;
border: none;
}
.calc__table-content {
display: flex;
flex-direction: column;
gap: 16px;
}
.calc__table-title {
margin: 0;
color: var(--clr-black);
font-weight: 600;
}
.calc__table-ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
gap: 10px;
}
.calc__table-li {
margin: 0;
color: var(--clr-gray-600);
font-weight: 400;
}
.calc__table-price {
margin: 0;
}
.calc__table-wrap {
width: 100%;
display: flex;
justify-content: center;
}
.calc__table-btn {
padding: 16px 32px;
width: 100%;
}
.calc__table-subtitle {
display: none;
}
@media screen and (max-width: 1024px) {
.calc {
flex-direction: column;
align-items: flex-start;
}
.calc__content, .calc__table {
flex: initial;
}
.calc__table {
align-self: normal;
}
}
@media screen and (max-width: 768px) {
.calc {
gap: 0;
}
.calc__content {
padding: 48px 24px 0;
align-self: normal;
border-radius: 24px 24px 0 0;
background-color: var(--clr-gray);
}
.calc__picture {
width: calc((583px / 768px) * 100vw);
height: calc((236px / 768px) * 100vw);
}
.calc__img_1 {
height: calc((78px / 768px) * 100vw);
width: calc((78px / 768px) * 100vw);
top: 0;
left: calc((78px / 768px) * 100vw);
}
.calc__img_2 {
height: calc((117px / 768px) * 100vw);
width: calc((117px / 768px) * 100vw);
top: calc((40px / 768px) * 100vw);
left: 0;
}
.calc__img_3 {
width: calc((118px / 768px) * 100vw);
height: calc((117px / 768px) * 100vw);
top: calc((118px / 768px) * 100vw);
left: calc((39px / 768px) * 100vw);
}
.calc__img_4 {
height: calc((78px / 768px) * 100vw);
width: calc((78px / 768px) * 100vw);
bottom: 0;
left: calc((189px / 768px) * 100vw);
}
.calc__img_5 {
height: calc((78px / 768px) * 100vw);
width: calc((78px / 768px) * 100vw);
top: 0;
left: calc((189px / 768px) * 100vw);
}
.calc__img_6 {
width: calc((118px / 768px) * 100vw);
height: calc((117px / 768px) * 100vw);
top: calc((39px / 768px) * 100vw);
left: calc((228px / 768px) * 100vw);
}
.calc__img_7 {
width: calc((118px / 768px) * 100vw);
height: calc((117px / 768px) * 100vw);
top: 0;
left: calc((307px / 768px) * 100vw);
}
.calc__img_8 {
width: calc((117px / 768px) * 100vw);
height: calc((118px / 768px) * 100vw);
top: calc((40px / 768px) * 100vw);
left: calc((386px / 768px) * 100vw);
}
.calc__img_9 {
width: calc((117px / 768px) * 100vw);
height: calc((118px / 768px) * 100vw);
bottom: 0;
left: calc((346px / 768px) * 100vw);
}
.calc__img_10 {
width: calc((118px / 768px) * 100vw);
height: calc((117px / 768px) * 100vw);
top: 0;
left: calc((464px / 768px) * 100vw);
}
.calc__img_11 {
width: calc((118px / 768px) * 100vw);
height: calc((117px / 768px) * 100vw);
bottom: 0;
left: calc((464px / 768px) * 100vw);
}
.calc__result {
width: 100%;
}
.calc__result-title {
background: rgba(237, 240, 246, 1);
}
.calc__result-subtitle {
display: none;
}
.calc__table {
border-radius: 0 0 24px 24px;
}
.calc__table-subtitle {
display: inline-flex;
text-align: center;
}
} .product {
display: flex;
flex-direction: column;
gap: 48px;
}
.product__article {
margin: 0 auto;
max-width: 70%;
}
.product__list {
display: grid;
grid-template-columns: repeat(4, 1fr);
justify-content: flex-start;
align-items: flex-start;
gap: 20px;
}
.product__item {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
gap: 16px;
text-decoration: none;
box-sizing: border-box;
}
.product__tab-list {
position: absolute;
top: 18px;
right: 8px;
left: 8px;
display: flex;
justify-content: flex-end;
flex-wrap: wrap;
gap: 6px;
z-index: 2;
}
.product__tab {
padding: 6px 12px 6px 12px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 18px;
background: var(--clr-blue);
}
.product__tab-title {
margin: 0;
color: var(--clr-white);
}
.product__picture {
position: relative;
width: 100%;
height: calc((355px / 1440px) * 100vw);
display: flex;
justify-content: center;
align-items: center;
border-radius: 24px;
background: var(--clr-gray);
overflow: hidden;
}
.product__img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transition: .3s ease-in-out;
}
.product__item:hover .product__picture .product__img {
transform: scale(1.05);
}
.product__info {
width: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
gap: 12px;
}
.product__price {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
gap: 10px;
}
.product__price .new {
margin: 0;
color: var(--clr-black);
font-weight: 700;
}
.product__price .old {
margin: 0;
color: var(--clr-gray-600);
font-weight: 400;
text-decoration: line-through;
}
.product__article-info {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
gap: 8px;
}
.product__article-title {
margin: 0;
color: var(--clr-black);
font-weight: 500;
}
.product__article-subtitle {
margin: 0;
color: var(--clr-gray-600);
}
@media screen and (max-width: 1024px) {
.product__article-info {
max-width: 100%;
}
.product__list {
display: grid;
grid-template-columns: repeat(2, 1fr);
row-gap: 40px;
}
.product__picture {
height: calc((680px / 1440px) * 100vw);
}
.product__price {
flex-direction: column;
align-items: flex-start;
}
}
@media screen and (max-width: 768px) {
.product {
gap: 38px;
}
} .advantage {
display: flex;
flex-direction: column;
gap: 48px;
}
.advantage__list {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.advantage__item {
padding: 24px;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
gap: 18px;
border-radius: 24px;
background: var(--clr-gray);
}
.advantage__icon {
height: 42px;
width: 42px;
display: block;
}
.advantage__item-title {
margin: 0;
font-weight: 500;
color: var(--clr-black);
}
.advantage__item-subtitle {
margin: 0;
font-weight: 400;
color: var(--clr-gray-600);
}
.advantage__btn {
padding: 16px 32px;
}
@media screen and (max-width: 1280px) {
.advantage__list {
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (max-width: 768px) {
.advantage {
gap: 38px;
}
.advantage__list {
grid-template-columns: 1fr;
}
} .trubl {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
gap: 20px;
}
.trubl__article {
width: 50%;
position: sticky;
top: 20%;
}
.trubl__list {
width: 50%;
display: flex;
flex-direction: column;
gap: 20px;
}
.trubl__item {
padding: 24px;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
gap: 50px;
border-radius: 24px;
background: var(--clr-gray);
}
.trubl__item-title {
margin: 0;
}
.trubl__item-content {
max-width: 60%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
gap: 10px;
}
.trubl__item-tab {
padding: 6px 14px;
color: var(--clr-white);
display: flex;
justify-content: center;
align-items: center;
border-radius: 9px;
background: var(--clr-blue);
}
.trubl__item-subtitle p {
margin: 0;
font-weight: 400;
color: var(--clr-gray-600);
}
@media screen and (max-width: 1280px) {
.trubl__item {
flex-direction: column;
gap: 20px;
}
.trubl__item-content {
max-width: 100%;
}
}
@media screen and (max-width: 768px) {
.trubl {
flex-direction: column;
gap: 38px;
}
.trubl__article {
width: 100%;
position: relative;
top: 0;
}
.trubl__list {
width: 100%;
flex-direction: row;
overflow-x: scroll;
gap: 10px;
}
.trubl__item {
min-width: 260px;
}
} .offer {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
gap: 20px;
}
.offer__content,
.offer__picture {
flex: 1 1 0;
}
.offer__content {
height: 100%;
aspect-ratio: 1/1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.offer__content-article {
display: flex;
flex-direction: column;
gap: 20px;
}
.offer__content-list {
}
.offer__content-item {
}
.offer__content-item p {
margin: 0;
font-weight: 400;
color: var(--clr-gray-600);
}
.offer__text {
margin: 0;
font-weight: 400;
color: var(--clr-black);
}
.offer__btn {
padding: 16px 32px;
align-self: flex-start;
}
.offer__picture {
aspect-ratio: 1/1;
overflow: hidden;
border-radius: 24px;
}
.offer__img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
@media screen and (max-width: 1024px) {
.offer {
flex-direction: column-reverse;
}
.offer__content, .offer__picture {
flex: initial;
}
.offer__content {
aspect-ratio: initial;
gap: 40px;
}
}
@media screen and (max-width: 768px) {
.offer__content {
gap: 38px;
}
.offer__btn {
align-self: normal;
}
} .map__picture {
width: 100%;
height: 50vw;
display: flex;
align-items: center;
justify-content: center;
}
.map__img {
width: 80%;
height: 80%;
display: block;
object-fit: contain;
}
@media screen and (max-width: 1024px) {
.map {
display: none;
}
} .review {
position: relative;
display: flex;
flex-direction: column;
gap: 48px;
}
.review__swiper {
width: 100%;
height: 100%;
}
.review__button {
position: absolute;
top: 55%;
transform: translateY(-55%);
width: 48px;
height: 48px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
cursor: pointer;
transition: .2s ease-in-out;
}
.review__button:hover {
opacity: .8;
}
.review-button-next {
right: -1.6%;
transform: rotate(0deg);
}
.review-button-prev {
left: -1.6%;
transform: rotate(180deg);
}
.review__slide-content {
display: flex;
flex-direction: column;
gap: 20px;
}
.review__slide-picture {
position: relative;
border-radius: 24px;
background: var(--clr-white);
overflow: hidden;
}
.review__play-btn {
position: absolute;
bottom: 24px;
right: 14px;
outline: none;
border: none;
background: transparent;
cursor: pointer;
}
.review__play-icon {
height: 48px;
width: 48px;
display: block;
object-fit: contain;
}
.review__slide-img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.review__slide-header {
padding: 0px 24px;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
gap: 8px;
}
.review__slide-title {
margin: 0;
color: var(--clr-black);
font-weight: 500;
}
.review__slide-subtitle {
margin: 0;
color: var(--clr-gray-600);
font-weight: 400;
}
.review__modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
align-items: center;
justify-content: center;
background-color: rgba(0, 0, 0, 0.9);
z-index: 100001;
}
.review__modal--active {
display: flex;
}
.review__modal-content {
position: relative;
margin: 0 16px;
}
.review__modal-video {
display: block;
aspect-ratio: 1/1;
}
.review__modal-close {
position: absolute;
top: 0;
right: 0;
width: 32px;
height: 32px;
border-radius: 50%;
border: none;
padding: 0;
cursor: pointer;
background: rgba(0, 0, 0, 0.6);
z-index: 2;
}
.review__modal-close::before,
.review__modal-close::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 18px;
height: 2px;
background: #fff;
transform-origin: center;
}
.review__modal-close::before {
transform: translate(-50%, -50%) rotate(45deg);
}
.review__modal-close::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
@media screen and (max-width: 768px) {
.review__button {
top: 50%;
width: 48px;
height: 48px;
}
.review-button-next {
right: -5%;
}
.review-button-prev {
left: -5%;
}
.review__modal-content {
margin: 0;
max-width: 320px;
}
.review__modal-video {
aspect-ratio: initial;
width: 100%;
}
.review__slide-header {
padding: 0 12px;
}
.review__slide-content {
gap: 14px;
}
} .about {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.about__content {
display: flex;
flex-direction: column;
gap: 40px;
}
.about__content-article {
display: flex;
flex-direction: column;
gap: 16px;
}
.about__content-title {
margin: 0;
color: var(--clr-black);
font-weight: 600;
}
.about__content-subtitle {
margin: 0;
color: var(--clr-gray-600);
font-weight: 400;
}
.about__btn {
padding: 16px 32px;
text-decoration: none;
display: flex;
align-self: flex-start;
}
.about__picture {
overflow: hidden;
border-radius: 24px;
background: var(--clr-gray);
}
.about__img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
@media screen and (max-width: 768px) {
.about {
grid-template-columns: 1fr;
}
.about__content {
gap: 20px;
}
.about__btn {
width: 100%;
justify-content: center;
box-sizing: border-box;
}
} .blog {
display: flex;
flex-direction: column;
gap: 20px;
}
.blog__breadcrumbs {
display: flex;
flex-direction: column;
gap: 14px;
}
.blog__breadcrumbs-link {
color: var(--clr-gray-600);
}
.blog__breadcrumbs-link a {
color: var(--clr-gray-600);
text-decoration: none;
}
.blog__breadcrumbs-title {
margin: 0;
color: var(--clr-black);
}
.blog__categories {
display: flex;
flex-wrap: wrap;
gap: 15px;
}
.blog__category-link {
padding: 9px 24px;
color: var(--clr-gray-600);
font-weight: 400;
letter-spacing: 0%;
text-decoration: none;
text-align: center;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
box-sizing: border-box;
border: 1px solid var(--clr-gray-600);
border-radius: 12px;
background: var(--clr-white);
transition: .3s ease-in-out;
}
.blog__category-link:hover,
.blog__category-link.active {
color: var(--clr-white);
background: var(--clr-blue);
border-color: transparent;
}
.blog__list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 30px;
}
.blog__item {
background: var(--clr-white);
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.blog__item:hover {
transform: translateY(-5px);
}
.blog__item-link {
display: block;
text-decoration: none;
color: inherit;
}
.blog__item-image {
width: 100%;
height: 200px;
overflow: hidden;
background: var(--clr-dark-gray);
border-radius: 16px;
}
.blog__item-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.blog__item:hover .blog__item-img {
transform: scale(1.05);
}
.blog__item-content {
padding: 20px 0;
}
.blog__item-category {
padding: 6px 8px;
color: var(--clr-black);
font-size: 12px;
font-weight: 400;
line-height: 15px;
letter-spacing: 0%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
border-radius: 4px;
background: var(--clr-gray);
}
.blog__item-title {
margin: 12px 0;
color: var(--clr-black);
font-size: 20px;
font-weight: 600;
letter-spacing: -1%;
}
.blog__item-excerpt {
margin: 0 0 15px 0;
font-size: 14px;
line-height: 1.6;
color: #666;
display: -webkit-box;
-webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
}
.blog__item-meta {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
gap: 10px;
}
.blog__item-date {
font-size: 12px;
color: #999;
}
.blog__pagination {
margin-top: 50px;
display: flex;
justify-content: center;
}
.blog__pagination .page-numbers {
display: flex;
gap: 10px;
list-style: none;
padding: 0;
margin: 0;
}
.blog__pagination .page-numbers li {
margin: 0;
}
.blog__pagination .page-numbers a,
.blog__pagination .page-numbers span {
display: inline-block;
padding: 10px 15px;
background: #f5f5f5;
color: var(--clr-black, #000);
text-decoration: none;
border-radius: 6px;
transition: all 0.3s ease;
}
.blog__pagination .page-numbers a:hover,
.blog__pagination .page-numbers .current {
background: var(--clr-primary, #007bff);
color: #fff;
}
.blog__no-posts {
text-align: center;
padding: 60px 20px;
font-size: 18px;
color: #666;
} @media screen and (max-width: 768px) {
.blog__list {
grid-template-columns: 1fr;
gap: 20px;
}
.blog__categories {
gap: 10px;
}
.blog__category-link {
padding: 8px 16px;
font-size: 13px;
}
.blog__item-link {
display: flex;
align-items: flex-start;
gap: 12px;
}
.blog__item-content {
padding: 0;
max-width: 60%;
}
.blog__item-excerpt {
display: none;
}
}
@media screen and (max-width: 430px) {
.blog-archive-page {
padding: 20px 0 40px;
}
.blog__item-image {
height: 96px;
}
.blog__item-title {
font-size: 16px;
display: -webkit-box;
-webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
}
}.faq {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.faq__article {
position: sticky;
top: 80px;
align-self: flex-start;
flex-shrink: 0;
width: 100%;
}
.faq__accordion {
flex: 1;
margin-top: 0;
}
.faq__accordion-list {
display: flex;
flex-direction: column;
gap: 16px;
}
.faq__accordion-item {
background-color: var(--clr-gray);
border-radius: 12px;
overflow: hidden;
transition: all 0.3s ease;
}
.faq__accordion-item:hover {
border-color: var(--clr-blue);
}
.faq__accordion-item.active {
border-color: var(--clr-blue);
}
.faq__accordion-header {
padding: 24px;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
background-color: var(--clr-gray);
transition: background-color 0.3s ease;
}
.faq__accordion-title {
margin: 0;
color: var(--clr-black);
font-weight: 500;
}
.faq__accordion-arrow {
width: 24px;
height: 24px;
transition: transform 0.3s ease;
flex-shrink: 0;
}
.faq__accordion-content {
padding: 0 24px;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease, padding 0.3s ease;
}
.faq__accordion-item.active .faq__accordion-content {
padding: 0 24px 24px 24px;
}
.faq__accordion-content p {
margin: 0;
color: var(--clr-gray-600);
font-weight: 400;
}
@media screen and (max-width: 1024px) {
.faq {
display: flex;
flex-direction: column;
gap: 40px;
}
.faq__article {
position: static;
max-width: 100%;
}
.faq__accordion {
width: 100%;
}
.faq__accordion-list {
width: 100%;
}
}
@media screen and (max-width: 768px) {
.faq {
gap: 20px;
}
.faq__accordion-header {
padding: 16px;
}
.faq__accordion-title {
font-size: 16px;
}
.faq__accordion-content {
padding: 0 16px;
}
.faq__accordion-item.active .faq__accordion-content {
padding: 0 16px 16px 16px;
}
.faq__accordion-text {
font-size: 14px;
}
}