@import 'global.css';

/* Home page */
.wrapper {
    position: relative;
}

/* Hero section */
.hero__slide {
    width: 100%;
    max-height: 440px;
    height: 100%;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.6) 39.37%, rgba(0, 0, 0, 0) 64.97%);
}

.hero__image {
    position: absolute;
    height: 100%;
    object-position: 50% 38%;
    z-index: -1;
}

.hero__wrapper {
    padding-top: calc(64px + var(--header-height));
    padding-bottom: 80px;
    padding-left: 280px;
}

.hero__headline {
    position: relative;
    margin-bottom: 24px;
    font-size: 64px;
    font-weight: 600;
    color: var(--color-white);
    z-index: 10;
}

.hero__list {
    position: relative;
    grid-auto-flow: row;
    line-height: var(--line-height-medium);
    font-size: 24px;
    color: var(--color-yellow400);
}

.hero__item {
    position: relative;
    padding-left: 32px;
    font-weight: 500;
}

.hero__item:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 12px;
    width: 8px;
    height: 8px;
    background-color: var(--color-yellow400);
    border-radius: 50%;
    transform: translateY(-50%);
}

.hero__image {
    width: 100%;
    max-height: 440px;
}

.hero__pagination {
    position: absolute;
    right: 0;
    bottom: 0 !important;
    left: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 6px;
    background-color: var(--color-gray300);
    z-index: 1;
}

.hero__pagination.swiper-pagination-progressbar {
    top: unset;
    bottom: 0;
}

.hero__pagination .swiper-pagination-progressbar-fill {
    background: var(--color-red700);
}

/* Makers */
.makers {
    position: absolute;
    bottom: -80px;
    padding-left: 40px;
    max-width: 1100px;
    width: 100%;
    z-index: 5;
}

.makers__wrapper {
    position: relative;
}

.makers__logo {
    width: max-content;
}

/* Search cars section */
.search-cars {
    position: absolute;
    right: 150px;
    bottom: -160px;
    padding: 32px;
    max-width: 555px;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(4px);
    border: 1px solid var(--color-gray400);
    border-radius: var(--border-radius-medium);
    z-index: 10;
}

.search-cars__headline {
    margin-bottom: 32px;
    font-size: 24px;
    font-weight: 600;
    color: var(--color-gray600);
}

.search-cars__form {
    grid-auto-flow: unset;
    grid-template-columns: 1fr 1fr;
    grid-gap: 16px;
}

.search-cars__label {
    margin-left: 12px;
    font-weight: 500;
}

.search-cars__input {
    grid-auto-flow: row;
    grid-template-columns: 1fr;
    grid-row-gap: 4px;
}

.search-cars__button {
    grid-column: 1 / 3;
    margin-top: 16px;
}

.search-cars__button-icon {
    fill: var(--color-white);
}

/* About us section */
.about-us {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-top: 140px;
    overflow: hidden;
}

.about-us__wrapper {
    grid-auto-flow: unset;
    grid-template-columns: 1fr 0.8fr;
    grid-column-gap: 16px;
}

.about-us__headline {
    grid-row: 1 / 2;
}

.about-us__headline-description {
    grid-row: 2 / 3;
    margin-bottom: 32px;
    font-size: 32px;
    font-weight: 500;
    color: var(--color-gray600);
}

.about-us__info {
    display: flex;
    flex-direction: column;
    grid-row: 3 / 4;
}

.about-us__description {
    line-height: var(--line-height-large);
    font-size: 16px;
    font-weight: 500;
}

.about-us__button {
    align-self: start;
    margin-top: 32px;
    padding: 12px 48px;
    font-size: 18px;
}

.about-us__cars {
    position: relative;
    display: flex;
    align-items: start;
    grid-row: 1 / 4;
    height: 100%;
}

.about-us__image {
    position: relative;
    margin-bottom: 10px;
    margin-left: 100px;
    max-width: 660px;
    width: 100%;
    z-index: 6;
}

.about-us__decor.decor,
.about-us__decor.decor-stroke {
    top: -300px;
    transform: skew(-45deg);
}

.about-us__decor.decor {
    right: 0;
    height: 1000px;
}

.about-us__decor.decor-stroke {
    right: -230px;
    height: 640px;
}

/* Popular cars section */
.popular-cars {
    position: relative;
    z-index: 1;
}

.popular-cars__container {
    position: relative;
}

.popular-cars__headline {
    font-size: 32px;
    color: var(--color-gray800);
}

.popular-cars__button {
    border-width: 2px;
}

.popular-cars__wrapper {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 24px;
}

.popular-cars__wrapper {
    padding: 8px 0 10px;
}

.popular-cars__button-prev,
.popular-cars__button-next,
.popular-cars__pagination {
    visibility: hidden;
}

/* Countries section */
.countries {
    position: relative;
    grid-auto-flow: unset;
    grid-template-columns: 1.1fr 1fr;
    align-items: start;
    padding-bottom: 52px;
    overflow: hidden;
}

.countries__wrapper {
    position: relative;
}

.countries__headline {
    position: relative;
    margin-bottom: 32px;
    font-size: 32px;
    z-index: 10;
}

.countries__list {
    position: relative;
    grid-auto-flow: unset;
    grid-template-columns: repeat(2, minmax(max-content, 1fr));
    grid-gap: 2px;
    font-size: 20px;
    font-weight: 500;
    color: var(--color-black);
    z-index: 10;
}

.countries__link {
    grid-auto-flow: unset;
    grid-template-columns: auto 1fr;
    grid-column-gap: 16px;
    justify-content: start;
    padding: 16px 12px;
    border-radius: var(--border-radius-small);
    transition: .2s;
}

.countries__link:hover {
    color: var(--color-white);
    background-color: var(--color-red600);
}

.countries__link:active {
    color: var(--color-white);
    background-color: var(--color-red700);
}

.countries__image {
    max-width: 28px;
}

.countries__decor.decor-stroke {
    height: 400px;
    width: 700px;
    left: -60px;
}

.countries__decor.decor {
    height: 400px;
    width: 700px;
}

.countries__map {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
    max-width: 730px;
    width: 100%;
}

/* buying-process section */
.buying-process {
    padding-bottom: 100px;
    background-image: linear-gradient(0deg, rgba(51, 51, 51, 0.95), rgba(51, 51, 51, 0.95)),
    url("../images/home/buying-process-background.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.buying-process__content {
    grid-auto-flow: unset;
    grid-template-columns: 1fr;
    grid-column-gap: 26px;
    align-items: start;
}

.buying-process__list {
    position: relative;
    font-size: 24px;
    font-weight: 600;
    color: var(--color-white);
}

.buying-process__item {
    grid-auto-flow: unset;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 20px;
    cursor: default;
}

.buying-process__item + .buying-process__item {
    margin-top: 12px;
}

.buying-process__item-content {
    position: relative;
    grid-auto-flow: unset;
    grid-template-columns: auto auto 1fr;
    grid-column-gap: 12px;
    justify-content: start;
    padding: 24px;
    border-radius: var(--border-radius-medium);
    transition: .2s;
}

.buying-process__item_active .buying-process__item-content {
    background-color: rgba(111, 111, 111, 0.85);
}

.buying-process__number {
    position: absolute;
    top: 50%;
    left: -110px;
    font-size: 128px;
    color: var(--color-yellow300);
    transform: translateY(-50%);
    opacity: 0;
    transition: .2s;
}

.buying-process__item_active .buying-process__number {
    opacity: 0.6;
}

.buying-process__icon {
    margin-right: 4px;
    fill: var(--color-white);
}

.buying-process__arrow {
    display: none;
}

.buying-process__image {
    position: absolute;
    top: 0;
    right: 0;
    max-width: 660px;
    width: 40vw;
    border-radius: var(--border-radius-small);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s;
}

.buying-process__item_active .buying-process__image {
    opacity: 1;
    visibility: visible;
}

/* Services section */
.services {
    margin-bottom: 80px;
}

.services__container {
    position: relative;
}

.services__swiper {
    display: grid;
    grid-auto-flow: column;
    padding: 8px 0 10px;
}

.services-card {
    display: grid;
    grid-template-rows: auto 1fr;
    height: 100%;
    background-color: var(--color-white);
    border-radius: var(--border-radius-medium);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    transition: .2s;
}

.services-card:hover {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
}

.services-card__image {
    width: 100%;
}

.services-card__content {
    display: grid;
    grid-template-rows: auto 1fr 20px;
    padding: 16px 12px;
}

.services-card__headline {
    margin-bottom: 12px;
}

.services-card__headline-link {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    font-size: 18px;
    font-weight: 500;
    color: var(--color-gray800);
    overflow: hidden;
    transition: .2s;
}

.services-card:hover .services-card__headline-link {
    color: var(--color-red700);
}

.services-card__headline-link:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
}

.services-card__description {
    display: -webkit-box;
    -webkit-line-clamp: 9;
    -webkit-box-orient: vertical;
    margin-bottom: 16px;
    text-overflow: ellipsis;
    color: var(--color-gray600);
    overflow: hidden;
}

.services-card__link {
    position: relative;
    justify-self: end;
    margin-top: auto;
    font-weight: 500;
    color: var(--color-gray500);
    transition: color .2s;
    z-index: 10;
}

.services-card:hover .services-card__link {
    color: var(--color-red600);
}

.services__button-prev {
    top: 50%;
}

.services__button-next {
    top: 50%;
}

/* Socials section */
.social {
    padding-top: 40px;
    padding-bottom: 80px;
}

.social__list {
    grid-auto-flow: unset;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 12px;
}

.social__link {
    position: relative;
    grid-auto-flow: unset;
    grid-template-columns: auto auto;
    grid-column-gap: 16px;
    justify-content: center;
    padding: 25px;
    width: 100%;
    font-size: 24px;
    font-weight: 600;
    color: var(--color-white);
    background-color: #52CE5F;
    border-radius: 10px;
    overflow: hidden;
    transition: .2s;
}

.social__link:hover {
    opacity: 0.9;
}

.social__link_instagram {
    background-color: #DC2626;
}

.social__link_facebook {
    background-color: #3C5A9A;
}

.social__icon-decor {
    position: absolute;
    top: -24px;
    right: -6px;
    width: 70px;
    height: 70px;
    fill: var(--color-white);
    opacity: 0.2;
}

.social__icon {
    justify-self: end;
    width: 45px;
    height: 45px;
    fill: var(--color-white);
}

/* Review section */
.review {
    padding-bottom: 80px;
    background: linear-gradient(0deg, rgba(74, 74, 74, 0.96), rgba(74, 74, 74, 0.96)),
    url("../images/home/review/background.png");
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
}

.review__container {
    position: relative;
}

.review__swiper {
    display: grid;
    grid-auto-flow: column;
    width: calc(100% - (52px * 2));
}

.review-card {
    grid-auto-flow: unset;
    grid-template-columns: 200px 1fr;
    grid-column-gap: 12px;
    align-items: start;
    padding: 8px 12px 8px 8px;
    max-height: 270px;
    height: 100%;
    background-color: var(--color-white);
    border-radius: var(--border-radius-medium);
    overflow: hidden;
}

.review-card__image {
    width: 100%;
    height: 100%;
    border-radius: var(--border-radius-small);
}

.review__content {
    padding-top: 12px;
    padding-bottom: 8px;
    grid-auto-flow: row;
}

.review-card__name {
    margin-bottom: 8px;
    font-size: 24px;
    font-weight: 600;
    color: var(--color-gray800);
}

.review-card__location {
    margin-bottom: 16px;
    font-size: 18px;
    font-weight: 500;
    color: var(--color-red700);
}

.review-card__location_country {
    color: var(--color-gray500);
}

.review-card__description {
    display: -webkit-box;
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    line-height: var(--line-height-large);
    font-size: 16px;
    font-weight: 500;
    color: var(--color-gray600);
    overflow: hidden;
}

.review__button-next {
    right: calc(50% - var(--container-width-small) / 2);
}

.review__button-prev {
    left: calc(50% - var(--container-width-small) / 2);
}

/* Contact us section */
.contact-us {
    position: relative;
    background: linear-gradient(269.83deg, #F2F2F2 36.89%,
        rgba(242, 242, 242, 0.92) 99.86%),
        linear-gradient(180deg, #F2F2F2 6.98%,
        rgba(242, 242, 242, 0) 22.95%),
        url(../images/home/contact-us/background.png) no-repeat center;
    background-size: cover;
    overflow: hidden;
}

.contact-us__content {
    grid-auto-flow: unset;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 16px;
}

.contact-us__wrapper {
    position: relative;
    grid-auto-flow: row;
    grid-row-gap: 16px;
    margin-bottom: 80px;
    z-index: 10;
}

.contact-us__headline {
    font-size: 48px;
    font-weight: 600;
    color: var(--color-gray800);
}

.contact-us__description {
    margin-bottom: 16px;
    font-size: 32px;
    font-weight: 500;
    color: var(--color-gray600);
}

.contact-us__list {
    grid-auto-flow: row;
    grid-row-gap: 20px;
    margin-bottom: 16px;
}

.contact-us__link {
    grid-auto-flow: unset;
    grid-template-columns: auto 1fr;
    grid-column-gap: 16px;
    font-size: 18px;
    font-weight: 600;
    color: var(--color-gray800);
    transition: .2s;
}

.contact-us__link:hover {
    color: var(--color-red600);
}

.contact-us__icon {
    fill: var(--color-gray400);
    transition: .2s;
}

.contact-us__link:hover .contact-us__icon {
    fill: var(--color-red600);
}

.contact-us__button {
    justify-self: start;
    padding: 12px 48px;
    font-size: 18px;
    font-weight: 600;
}

.contact-us__right {
    position: relative;
    display: flex;
    margin-top: auto;
    width: 710px;
}

.contact-us__image {
    position: relative;
    width: 710px;
    z-index: 10;
}

.contact-us__decor.decor {
    top: 0;
    right: 140px;
    width: 250px;
    height: 700px;
}

.contact-us__decor.decor-stroke {
    top: 0;
    right: 90px;
    width: 250px;
    height: 700px;
}

/* Catalog page */
/* Filter section */
.filter {
    grid-auto-flow: unset;
    grid-template-columns: auto 1fr auto;
    grid-column-gap: 16px;
    padding-top: 12px;
    padding-bottom: 12px;
    margin-bottom: 24px;
    background-color: var(--color-gray800);
}

.filter__headline {
    font-size: 24px;
    color: var(--color-white);
}

.filter__options {
    grid-auto-flow: unset;
    grid-template-columns: repeat(2, 1.5fr) repeat(4, 1fr);
    grid-column-gap: 16px;
}

.filter__button {
    padding: 6px 24px;
    font-size: 18px;
}

/* Result section */
.result {
    margin-bottom: 24px;
}

.result__name {
    grid-column-gap: 16px;
    justify-content: start;
    align-self: start;
    font-size: 24px;
    font-weight: 600;
    color: var(--color-gray600);
}

.result__total {
    line-height: var(--line-height-large);
    font-size: 16px;
    font-weight: 500;
}

.result__button {
    color: var(--color-gray800);
    background-color: var(--color-yellow400);
}

.result__button:hover {
    background-color: var(--color-yellow300);
}

/* Sort section */
.sort {
    margin-bottom: 24px;
}

.sort__option {
    grid-template-columns: auto 200px;
    grid-column-gap: 16px;
}

.sort__option_show {
    grid-template-columns: auto 100px;
}

.sort__label {
    line-height: var(--line-height-large);
    font-size: 16px;
    font-weight: 500;
}

/* Catalog section */
.catalog {
    grid-auto-flow: unset;
    grid-template-columns: repeat(6, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 16px;
    margin-bottom: 48px;
}

/* Product page */
.product {
    display: grid;
    grid-template-columns: minmax(auto, 700px) minmax(330px, 1fr) minmax(286px, 370px);
    grid-column-gap: 32px;
}

.product__header {
    grid-column: 1 / 4;
}

.product__print {
    grid-column-gap: 10px;
    color: var(--color-gray800);
}

.product__print:hover {
    color: var(--color-red800);
}

.product__print:hover .button__icon {
    fill: var(--color-red800);
}

/* Product gallery section */
.product__gallery {
    position: relative;
}

.product__gallery-top {
    max-width: 700px;
}

.product__gallery-slide {
    max-width: 700px;
    max-height: 526px;
    border-radius: var(--border-radius-small);
    overflow: hidden;
}

.product-image {
    width: 100%;
    height: 100%;
}

.product__thumbs {
    margin-top: 8px;
    max-width: 700px;
    width: 100%;
}

.product__thumbs-slide {
    height: auto;
    border: 1px solid transparent;
    border-radius: var(--border-radius-medium);
    overflow: hidden;
    cursor: pointer;
    transition: .2s;
    z-index: -1;
}

.product__thumb-image {
    position: relative;
    width: 100%;
    max-height: 150px;
    height: 100%;
    border-radius: var(--border-radius-medium);
    z-index: -1;
}

.product__thumb-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-height: 150px;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: var(--border-radius-medium);
    visibility: hidden;
    opacity: 0;
    z-index: 10;
    transition: .2s;
}

.product__thumb-slide:hover .product__thumb-backdrop,
.swiper-slide-thumb-active .product__thumb-backdrop {
    opacity: 1;
    visibility: visible;
}

.product__thumb-icon {
    width: 48px;
    height: 48px;
    fill: var(--color-white);
}

.product__button {
    opacity: 0;
    transition: .2s;
}

.product__gallery:hover .product__button {
    opacity: 1;
}

.product__button-prev {
    left: 8px;
}

.product__button-next {
    right: 8px;
}

/* Product info section */
.product__info-header {
    color: var(--color-gray500);
    margin-bottom: 16px;
}

.product__list {
    margin-bottom: 32px;
    border: 1px solid var(--color-gray100);
    border-radius: var(--border-radius-medium);
    overflow: hidden;
}

.product__item {
    grid-auto-flow: unset;
    grid-template-columns: 160px 1fr;
    padding: 4px 0;
    height: 40px;
    font-weight: 500;
    background-color: var(--color-white);
}

.product__item:nth-child(even) {
    background-color: var(--color-gray50);
}

.product__item-key {
    grid-column-gap: 10px;
    justify-content: start;
    padding-left: 16px;
}

.product__item-icon {
    width: 24px;
    height: 24px;
}

.product__item-value {
    padding-left: 16px;
}

.product__price {
    grid-auto-flow: unset;
    grid-template-columns: minmax(120px, 144px) minmax(190px, 220px);
    grid-template-rows: 52px auto;
    grid-row-gap: 8px;
}

.product__price-key {
    padding: 17px 12px;
    width: max-content;
}

.product__price-quantity {
    padding: 16px 16px 12px;
    color: var(--color-white);
    background-color: var(--color-red700);
    border-radius: var(--border-radius-small);
}

.product__price-convert {
    display: block;
    grid-column: 2 / 3;
    margin-left: 16px;
    font-weight: 500;
    color: var(--color-gray500);
}

/* Product contact section */
.product__contact {
    align-self: start;
    padding: 24px 16px;
    text-align: center;
    background-color: var(--color-white);
    border-radius: var(--border-radius-medium);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}

.product__contact-headline {
    margin-bottom: 32px;
}

.product__contact-description {
    color: var(--color-gray500);
    margin-bottom: 16px;
}

.product__contact-links {
    grid-auto-flow: unset;
    grid-template-columns: repeat(2, auto);
    grid-column-gap: 24px;
    justify-content: center;
}

.product__contact-link {
    grid-column-gap: 4px;
    justify-content: start;
    color: var(--color-green600);
    transition: .2s;
}

.product__contact-link:hover {
    color: var(--color-green700);
}

.product__contact-link_email {
    color: var(--color-red700);
}

.product__contact-link_email:hover.product__contact-link {
    color: var(--color-red800);
}

.product__contact-icon {
    width: 24px;
    height: 24px;
    fill: var(--color-green600);
    transition: .2s;
}

.product__contact-link:hover .product__contact-icon {
    fill: var(--color-green700);
}

.product__contact-link_email .product__contact-icon {
    fill: var(--color-red700);
}

.product__contact-link_email:hover .product__contact-icon{
    fill: var(--color-red800);
}

.product__form {
    grid-auto-flow: unset;
    grid-template-columns: 1fr 1fr;
    grid-gap: 16px;
    margin-top: 32px;
}

.product__input {
    grid-auto-flow: unset;
    grid-template-columns: 1fr;
    grid-row-gap: 4px;
    justify-content: start;
    text-align: start;
}

.product__textarea {
    grid-column: 1 / 3;
}

.product__textarea .textarea {
    height: 62px;
}

.product__form-button {
    margin-top: 16px;
    grid-column: 1 / 3;
}

/* Similar cars section */
.similar-cars {
    margin-bottom: 80px;
}

.similar-cars__content {
    display: flex;
    flex-direction: column;
}

.similar-cars__list {
    grid-auto-flow: unset;
    grid-template-columns: repeat(6, 1fr);
    grid-column-gap: 10px;
    margin-bottom: 32px;
}

.similar-cars__button {
    align-self: center;
    border-width: 2px;
}

/* About us Page */
/* About us section */
.about {
    grid-auto-flow: unset;
    grid-template-columns: minmax(360px, 740px) minmax(330px, 1fr);
    grid-template-rows: auto 1fr;
    grid-column-gap: 40px;
    align-items: start;
    padding-bottom: 80px;
}

.about__image {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    align-self: center;
}

.about__description {
    margin-top: 32px;
    line-height: var(--line-height-large);
    font-size: 16px;
    font-weight: 500;
    color: var(--color-gray500);
}

/* Car auction section */
.car-auction {
    padding-bottom: 60px;
    background-color: var(--color-white);
}

.car-auction__content {
    grid-auto-flow: unset;
    grid-template-columns: 1fr auto;
    grid-column-gap: 20px;
    align-items: start;
}

.car-auction__description {
    grid-column: 1 / 4;
    margin-bottom: 48px;
    width: 75%;
    line-height: var(--line-height-medium);
    font-size: 20px;
    font-weight: 500;
    color: var(--color-gray500);
}

.car-auction__wrapper {
    font-size: 20px;
    font-weight: 500;
}

.car-auction__label {
    font-size: 20px;
    font-weight: 500;
    color: var(--color-blue700);
}

.car-auction__list {
    grid-auto-flow: row;
    grid-row-gap: 12px;
    margin-top: 24px;
    margin-bottom: 32px;
}

.car-auction__item {
    grid-column-gap: 16px;
    justify-content: start;
    line-height: var(--line-height-medium);
}

.car-auction__icon {
    width: 24px;
    height: 24px;
    fill: var(--color-blue700);
}

.car-auction__button {
    padding: 12px 76px;
    font-size: 18px;
}

.car-auction__images {
    grid-auto-flow: unset;
    grid-template-columns: 240px 440px;
    grid-gap: 24px;
}

.car-auction__certified {
    grid-row: 1 / 3;
    align-self: start;
}

.car-auction__auction {
    max-width: 440px;
    width: 100%;
    border-radius: var(--border-radius-small);
}

/* Best choice section */
.best-choice__content {
    grid-auto-flow: unset;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 40px;
}

.best-choice__description {
    line-height: var(--line-height-large);
    font-size: 16px;
    font-weight: 500;
    color: var(--color-gray500);
}

.best-choice__image {
    max-width: 660px;
    width: 100%;
}

/* Blog page */
.blog {
    padding-top: 48px;
}

.blog__description {
    margin-bottom: 32px;
    line-height: var(--line-height-large);
    font-size: 16px;
    font-weight: 500;
    color: var(--color-gray500);
}


.blog__list {
    grid-auto-flow: row;
    grid-row-gap: 24px;
    margin-bottom: 40px;
}

/* Section about cars */
.about-cars {
    grid-auto-flow: unset;
    grid-template-columns: 1fr auto;
    padding-top: 55px;
    padding-bottom: 55px;
    background: linear-gradient(89.91deg, #8EACEF 13.69%,
        rgba(142, 172, 239, 0.5) 50.43%, #8EACEF 82.12%),
        url("../images/blog/background.jpg") no-repeat 50% 57%;
    background-size: cover;
}

.about-cars__wrapper {
    position: relative;
    grid-auto-flow: row;
    justify-items: start;
    align-items: start;
}

.about-cars .about-cars__wrapper:nth-child(2) {
    justify-items: end;
}

.about-cars__description {
    display: block;
    margin-bottom: 4px;
    color: var(--color-gray700);
}

.about-cars__headline {
    margin-bottom: 24px;
    font-size: 64px;
    font-weight: 600;
    color: var(--color-white);
}

.about-cars__button {
    padding: 12px 48px;
    font-size: 18px;
}

.about-cars__social {
    justify-content: end;
    grid-column-gap: 24px;
    margin-bottom: 24px;
}

.about-cars__social-link {
    position: relative;
}

.about-cars__social-image {
    position: relative;
    width: 100%;
    z-index: 1;
}

.about-cars__social-description {
    font-size: 32px;
    font-weight: 600;
    color: var(--color-white);
}

.about-cars__decor {
    position: absolute;
    bottom: -90px;
    right: 0;
    font-size: 132px;
    font-weight: 600;
    color: var(--color-white);
    opacity: 0.4;
    user-select: none;
}

/* Blog article page */
.blog-article {
    position: relative;
    grid-auto-flow: unset;
    grid-template-columns: 1fr 1.1fr;
    grid-column-gap: 24px;
    padding-top: 20px;
    margin-bottom: 74px;
    overflow: hidden;
}

.blog-article__wrapper {
    position: relative;
    z-index: 10;
}

.blog-article__date {
    position: relative;
    display: block;
    margin-bottom: 24px;
    font-size: 18px;
    font-weight: 500;
    color: var(--color-gray500);
    z-index: 10;
}

.blog-article__headline {
    position: relative;
    line-height: var(--line-height-large);
    font-size: 32px;
    z-index: 10;
}

.blog-article__decor.decor {
    top: 120px;
    left: 270px;
    height: 400px;
    width: 500px;
}

.blog-article__decor.decor-stroke {
    top: 100px;
    left: 200px;
    height: 400px;
    width: 500px;
}

.blog-article__image {
    position: relative;
    max-width: 768px;
    width: 100%;
    border-radius: var(--border-radius-medium);
    z-index: 10;
}

.blog-article__box {
    position: relative;
    grid-column: 1 / 3;
    display: flex;
    flex-direction: column;
    z-index: 10;
}

.blog-article__content {
    justify-self: center;
    margin: -30px auto 0;
    padding: 48px 32px;
    max-width: 964px;
    width: 100%;
    line-height: var(--line-height-large);
    font-size: 18px;
    font-weight: 300;
    background-color: var(--color-white);
    border-radius: var(--border-radius-medium);
}

.blog-article__share {
    grid-column-gap: 12px;
    justify-content: end;
    margin: 16px auto 0;
    max-width: 964px;
    width: 100%;
}

.blog-article__share-label {
    line-height: var(--line-height-large);
    font-size: 18px;
    font-weight: 300;
    color: var(--color-gray500);
}

.blog-article__share-list {
    grid-column-gap: 4px;
    justify-content: start;
}

.blog-article__share-link {
    max-width: 28px;
    max-height: 28px;
}

/* More articles section */
.more-articles {
    padding-bottom: 64px;
}

.more-articles__list {
    grid-auto-flow: row;
    grid-row-gap: 32px;
}

/* Contact us page */
.contact-wrapper {
    background: linear-gradient(90deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 21.43%), url("../images/contactUs/background.jpg") no-repeat 50% 25%;
    background-size: cover;
}

.contact-wrapper .breadcrumbs {
    background-color: transparent;
}

.contact {
    grid-auto-flow: unset;
    grid-template-columns: minmax(312px, 500px) 400px 400px;
    grid-column-gap: 40px;
    align-items: start;
    padding-top: 80px;
    padding-bottom: 80px;
    overflow: hidden;
}

.contact__wrapper {
    position: relative;
    z-index: 10;
}

.contact__description {
    width: 75%;
    font-size: 20px;
    font-weight: 500;
    color: var(--color-gray500);
}

.contact__list {
    margin-top: 64px;
    margin-bottom: 40px;
}

.contact__item {
    grid-column-gap: 16px;
    justify-content: start;
    line-height: var(--line-height-large);
    font-size: 16px;
    font-weight: 500;
}

.contact__item + .contact__item {
    margin-top: 16px;
}

.contact__link {
    grid-column-gap: 16px;
    justify-content: start;
    line-height: var(--line-height-large);
    font-size: 16px;
    font-weight: 500;
    transition: .2s;
}

.contact__item:hover .contact__link {
    color: var(--color-blue600);
}

.contact__icon {
    width: 24px;
    height: 24px;
    fill: var(--color-blue700);
}

.contact__social {
    grid-column-gap: 32px;
    justify-content: start;
}

.contact__social-link {
    padding: 8px;
    background-color: var(--color-white);
    border-radius: 50%;
    transition: background-color .2s;
}

.contact__social-link:hover {
    background-color: var(--color-blue700);
}

.contact__social-icon {
    width: 24px;
    height: 24px;
    fill: var(--color-blue700);
    transition: fill .2s;
}

.contact__social-link:hover .contact__social-icon {
    fill: var(--color-white);
}

.contact__form {
    position: relative;
    grid-auto-flow: row;
    grid-template-columns: 1fr;
    grid-row-gap: 16px;
    padding: 32px 24px;
    background-color: var(--color-white);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
    border-radius: var(--border-radius-medium);
    z-index: 10;
}

.contact__input {
    grid-auto-flow: unset;
    grid-template-columns: 1fr;
    grid-row-gap: 4px;
    justify-content: start;
    text-align: start;
}

.contact__textarea .textarea {
    height: 62px;
}

.contact__button {
    margin-top: 16px;
    font-size: 18px;
}

.contact__decorate {
    position: relative;
    display: flex;
    height: 100%;
}

.contact__toyota {
    position: relative;
    margin: auto 0;
    max-width: 390px;
    z-index: 10;
}

.contact__porsche {
    position: absolute;
    top: 90px;
    right: -100px;
    max-width: 330px;
    z-index: 5;
}

.contact__decor.decor {
    top: 20px;
    left: 60px;
    height: 600px;
    width: 400px;
    transform: skew(-45deg);
}

.contact__decor.decor-stroke {
    top: 0;
    left: 150px;
    height: 550px;
    width: 400px;
    transform: skew(-45deg);
}

/* Map section */
.map {
    display: flex;
    height: 424px;
}

.map__image {
    margin: 0 auto;
    width: 100vw;
    height: 100%;
}

/* Error page */
.error-page {
    display: flex;
    margin-top: calc(var(--header-height) + 24px);
    height: calc(100vh - var(--header-height));
    background: url("../images/404/background.png") no-repeat 50% 50%;
    background-size: cover;
}

.error-page__content {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-content: center;
    align-items: center;
    margin: auto;
    max-width: 610px;
    text-align: center;
    color: var(--color-white);
}

.error-page__image {
    margin-top: 24px;
    margin-bottom: 16px;
    max-width: 620px;
    width: 100%;
}

.error-page__headline {
    margin-bottom: 8px;
    font-size: 48px;
}

.error-page__description {
    margin-bottom: 32px;
    line-height: var(--line-height-medium);
    font-size: 20px;
}

.error-page__link {
    padding: 12px 24px;
    font-size: 18px;
}

@media (min-width: 1920px) {
    /* Blog article page */
    .blog-article__decor.decor {
        left: calc(50% - var(--container-width-small) / 2);
    }

    .blog-article__decor.decor-stroke {
        left: calc(50% - var(--container-width-small) / 2 - 50px);
    }
}

@media (max-width: 1920px) {
    /* Catalog page */
    .catalog {
        grid-template-columns: repeat(5, 1fr);
    }

    /* Product page */
    .product {
        grid-template-columns: minmax(555px, 700px) minmax(390px, 1fr) minmax(375px, 370px);
        grid-column-gap: 20px;
    }

    .similar-cars__list {
        grid-template-columns: repeat(5, 1fr);
    }

    .similar-cars__list .card:not(:nth-child(-n+5)) {
        display: none;
    }

    /* Contact us page */
    .contact__description {
        width: 100%;
    }

    .contact__toyota {
        max-width: 350px;
    }

    .contact__porsche {
        top: 110px;
        right: -160px;
        max-width: 300px;
    }

    /* About us page */
    .about {
        padding-bottom: 60px;
    }

    /* Blog article page */
    .blog-article {
        margin-bottom: 60px;
    }
}

@media (max-width: 1800px) {
    /* Home page */
    /* Hero section */
    .hero__wrapper {
        padding-left: 40px;
    }

    .makers {
        max-width: 950px;
    }

    .search-cars {
        right: 40px;
        max-width: 440px;
    }

    /* About us section */
    .about-us__headline-description {
        font-size: 24px;
    }

    .about-us__wrapper {
        grid-template-columns: minmax(540px, 1fr) auto;
    }

    .about-us__headline {
        font-size: 32px;
    }

    .about-us__decor.decor {
        right: 250px;
    }

    .about-us__decor.decor-stroke {
        right: 0;
        height: 600px;
    }

    /* Buying process section */
    .buying-process__content {
        padding-left: 130px;
    }

    .buying-process__item {
        grid-template-columns: minmax(670px, 1fr) minmax(560px, 1fr);
    }

    /* Services section */
    .services__swiper {
        width: calc(100% - 52px * 2);
    }

    .services__button-prev {
        left: 0;
    }

    .services__button-next {
        right: 0;
    }

    /* Review section */
    .review__button-next {
        right: 0;
    }

    .review__button-prev {
        left: 0;
    }

    /* About us page */
    /* Car auction section */
    .car-auction__description {
        width: 100%;
    }

    /* Blog page */
    .about-cars {
        background-position: 50% 55%;
    }

    /* Error page */
    .error-page__image {
        margin-top: 24px;
        max-width: 527px;
    }

    .error-page__headline {
        font-size: 32px;
    }

    .error-page__description {
        font-size: 18px;
    }
}

@media (max-width: 1440px) {
    /* Home page */
    /* Hero section */
    .makers {
        bottom: -180px;
        grid-auto-flow: unset;
        grid-template-columns: repeat(4, auto);
        grid-column-gap: 20px;
        grid-row-gap: 40px;
        justify-items: center;
        max-width: 650px;
    }

    .search-cars {
        bottom: -200px;
        max-width: 550px;
    }

    /* About us section */
    .about-us {
        padding-top: 240px;
    }

    .about-us__wrapper {
        grid-template-columns: 1fr 1fr;
    }

    .about-us__image {
        margin-left: 50px;
    }

    .about-us__decor.decor {
        right: 100px;
    }

    .about-us__decor.decor-stroke {
        height: 620px;
        right: -150px;
    }

    /* Popular cars section */
    .popular-cars__swiper {
        width: calc(100% - (60px * 2));
    }

    .popular-cars__wrapper {
        grid-auto-flow: column;
        grid-column-gap: unset;
    }

    .popular-cars__button-prev,
    .popular-cars__button-next,
    .popular-cars__pagination {
        visibility: visible;
    }

    .popular-cars__button-next,
    .popular-cars__button-prev {
        opacity: 1;
    }

    .popular-cars__button-next {
        right: 0;
    }

    .popular-cars__button-prev {
        left: 0;
    }

    /* Buying process section */
    .buying-process__content {
        padding-left: 110px;
    }

    .buying-process__item {
        grid-template-columns: minmax(440px, 1fr) minmax(560px, 1fr);
    }

    .buying-process__item-content {
        grid-column-gap: 16px;
    }

    .buying-process__number {
        left: -80px;
        font-size: 92px;
    }

    /* Contact us section */
    .contact-us__content {
        grid-template-columns: 1fr 550px;
    }

    .contact-us__right {
        margin-left: -100px;
    }

    /* Catalog page */
    .filter {
        grid-template-columns: 1fr auto;
        grid-row-gap: 16px;
    }

    .filter__headline {
        grid-column: 1 / 3;
    }

    .filter__options {
        grid-column-gap: 8px;
    }

    .filter__button {
        padding: 6px 18px;
    }

    .catalog {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Product page */
    .product {
        grid-template-columns: minmax(455px, 700px) minmax(337px, 1fr) minmax(286px, 370px);
        grid-column-gap: 20px;
    }

    .product__contact-headline {
        margin-bottom: 16px;
        font-size: 18px;
    }

    .product__form {
        grid-template-columns: 1fr;
        margin-top: 16px;
    }

    .product__textarea {
        grid-column: unset;
    }

    .product__form-button {
        grid-column: unset;
        margin-top: 0;
    }

    /* Contact us page */
    .contact {
        grid-template-columns: minmax(312px, 500px) minmax(360px, 1fr) 400px;
    }

    .contact__toyota {
        max-width: 300px;
    }

    .contact__porsche {
        top: 60px;
        right: 0;
        max-width: 240px;
    }

    .contact__decor.decor {
        left: -30px;
    }

    .contact__decor.decor-stroke {
        left: 50px;
    }

    /* Blog page */
    .about-cars {
        background-position: 50% 52%;
    }

    /* Blog article page */
    .blog-article__content {
        margin-top: 24px;
    }
}

@media (max-width: 1360px) {
    .about-us__decor.decor-stroke {
        height: 650px;
        right: -130px;
    }
}

@media (max-width: 1200px) {
    /* Home page */
    /* Hero section */
    .hero__headline {
        font-size: 48px;
    }

    .search-cars {
        bottom: -220px;
        padding: 32px 16px;
        max-width: 374px;
    }

    .makers {
        max-width: 580px;
    }

    /* About us section */
    .about-us__wrapper {
        grid-template-columns: 560px 560px
    }

    .about-us__cars {
        align-items: center;
    }

    /* Popular cars section */
    .popular-cars__swiper {
        width: 100%;
    }

    .popular-cars__button-next {
        right: 0;
    }

    .popular-cars__button-prev {
        left: 0;
    }

    /* Countries section */
    .countries__decor.decor {
        top: 150px;
    }

    .countries__decor.decor-stroke {
        top: 130px;
    }

    /* Buying process section */
    .buying-process__content {
        padding-left: 0;
    }

    .buying-process__item {
        grid-template-columns: minmax(480px, 1fr) minmax(480px, 1fr);
    }

    .buying-process__item + .buying-process__item {
        margin-top: 32px;
    }

    .buying-process__item-content {
        grid-column-gap: 16px;
        padding-left: 24px;
        border-top-left-radius: unset;
        border-bottom-left-radius: unset;
    }

    .buying-process__number {
        display: none;
    }

    .buying-process__image {
        width: 45vw;
    }

    /* Services section */
    .services__swiper {
        width: 100%;
    }

    /* Review section */
    .review__swiper {
        width: 100%;
    }

    /* Contact us section */
    .contact-us__content {
        grid-template-columns: 1fr 400px;
    }

    .contact-us__decor.decor {
        top: -150px;
        right: 400px;
        height: 1000px;
    }

    .contact-us__decor.decor-stroke {
        top: -160px;
        right: 350px;
        height: 1000px;
    }

    /* Catalog page */
    .filter__options {
        grid-template-columns: repeat(6, 1fr);
    }

    /* Product page */
    .product {
        grid-template-columns: minmax(408px, 1fr) minmax(292px, 414px);
        grid-column-gap: 8px;
        grid-row-gap: 32px;
    }

    .product__header {
        grid-column: 1 / 3;
    }

    .product__info {
        grid-column: 2 / 3;
        grid-row: 2 / 4;
    }

    .product__price {
        grid-auto-flow: unset;
        grid-template-columns: minmax(100px, 144px) minmax(130px, 246px);
    }

    .product__contact-headline {
        font-size: 24px;
    }

    .product__form {
        grid-template-columns: 1fr 1fr;
        margin-top: 32px;
    }

    .product__textarea {
        grid-column: 1 / 3;
    }

    .product__form-button {
        grid-column: 1 / 3;
        margin-top: 16px;
    }

    .similar-cars__list {
        grid-template-columns: repeat(4, 1fr);
    }

    .similar-cars__list .card:not(:nth-child(-n+4)) {
        display: none;
    }

    /* Contact us page */
    .contact {
        grid-template-columns: minmax(312px, 500px) minmax(330px, 1fr) 250px;
    }

    .contact__toyota {
        margin-left: -30px;
        max-width: 392px;
    }

    .contact__porsche {
        display: none;
    }

    /* About us page */
    .about {
        padding-bottom: 40px;
    }

    .about__description {
        font-size: 14px;
    }

    /* Car auction section */
    .car-auction__content {
        grid-template-columns: minmax(340px, 1fr) minmax(300px, 440px);
        grid-column-gap: 40px;
        grid-row-gap: 32px;
    }

    .car-auction__description {
        grid-column: 1 / 2;
        margin-bottom: 0;
        align-self: center;
    }

    .car-auction__wrapper {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
    }

    .car-auction__images {
        grid-template-columns: minmax(330px, 440px);
        grid-column: 2 / 3;
        grid-row: 1 / 3;
    }

    .car-auction__certified {
        grid-row: 3 / 4;
        justify-self: center;
    }

    .car-auction__auction + .car-auction__auction {
        grid-row: 1 / 2;
    }

    /* Blog page */
    /* About cars section */
    .about-cars__decor {
        font-size: 96px;
    }

    /* Error page */
    .error-page__image {
        margin-top: 60px;
        max-width: 410px;
    }

    .error-page__headline {
        font-size: 24px;
    }

    .error-page__description {
        font-size: 16px;
    }
}

@media (max-width: 1024px) {
    /* Home page */
    /* Hero section */
    .hero__slide {
        background: linear-gradient(90deg, rgba(0, 0, 0, 0.6) 59.37%,
            rgba(0, 0, 0, 0) 124.97%);
    }

    .hero__item {
        font-size: 20px;
    }

    .makers {
        bottom: -100px;
        grid-template-columns: unset;
        grid-auto-flow: column;
        grid-column-gap: 40px;
        padding: 0 40px;
        margin-right: 16px;
        max-width: unset;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .makers::-webkit-scrollbar {
        width: 0;
    }

    .makers__wrapper:before,
    .makers__wrapper:after {
        content: '';
        position: absolute;
        top: calc(50% + 60px);
        width: 50px;
        height: 80px;
        transform: translateY(-50%);
        z-index: 10;
    }

    .makers__wrapper:before {
        left: 0;
        background: linear-gradient(90deg, #F2F2F2 32.81%, rgba(242, 242, 242, 0) 100%);
    }

    .makers__wrapper:after {
        right: 0;
        background: linear-gradient(270deg, #F2F2F2 32.81%, rgba(242, 242, 242, 0) 100%);
    }

    .search-cars {
        right: 24px;
    }

    /* About us section */
    .about-us {
        padding-top: 140px;
        padding-bottom: 100px;
    }
    
    .about-us__wrapper {
        grid-template-columns: 1fr;
    }

    .about-us__description {
        width: 560px;
    }

    .about-us__decor.decor {
        top: -310px;
        right: -50px;
        height: 600px;
    }

    .about-us__decor.decor-stroke {
        top: -310px;
        height: 630px;
        right: -100px;
    }

    .about-us__cars {
        justify-content: end;
        grid-row: 4 / 5;
    }

    .about-us__image {
        margin-top: -50px;
        margin-right: -30px;
    }

    /* Popular cars */
    .popular-cars {
        padding-top: 0;
    }

    /* Buying process section */
    .buying-process__item {
        grid-template-columns: minmax(330px, 1fr) minmax(400px, 1fr);
    }

    .buying-process__item-content {
        padding-left: 24px;
    }

    /* Review section */
    .review-card {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        max-height: unset;
        height: 100%;
    }

    /* Contact us section */
    .contact-us__content {
        grid-template-columns: 1fr 290px;
    }

    .contact-us__wrapper {
        margin-bottom: 150px;
    }

    .contact-us__decor.decor {
        top: -160px;
        right: 460px;
    }

    .contact-us__decor.decor-stroke {
        top: -170px;
        right: 420px;
    }

    /* Catalog page */
    .filter {
        grid-row-gap: 16px;
    }

    .filter__options {
        grid-template-columns: repeat(4, 1fr);
        grid-row-gap: 8px;
        grid-column: 1 / 3;
    }

    .filter__options .filter__select:first-child {
        grid-column: 1 / 3;
    }

    .filter__options .filter__select:nth-child(2) {
        grid-column: 3 / 5;
    }

    .filter__button {
        grid-column: 1 / 3;
    }

    .catalog {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Product page */
    .similar-cars__list {
        grid-template-columns: repeat(3, 1fr);
    }

    .similar-cars__list .card:not(:nth-child(-n+3)) {
        display: none;
    }

    /* Contact us page */
    .contact {
        grid-template-columns: minmax(312px, 500px) minmax(330px, 1fr);
        grid-row-gap: 120px;
    }

    .contact__form {
        grid-column: 2 / 3;
        grid-row: 1 / 3;
    }

    .contact__toyota {
        margin-left: -30px;
        max-width: 392px;
    }

    .contact__porsche {
        top: -70px;
        left: 220px;
        display: block;
    }

    .contact__decor.decor {
        top: -300px;
        left: 60px;
        height: 900px;
    }

    .contact__decor.decor-stroke {
        top: -280px;
        left: 80px;
        height: 900px;
    }

    /* About us page */
    .about__description {
        font-size: 14px;
    }

    /* Car auction section */
    .car-auction__description {
        font-size: 16px;
    }

    .car-auction__wrapper {
        font-size: 16px;
    }

    .car-auction__icon {
        width: 20px;
        height: 20px;
    }

    /* Best choice section */
    .best-choice__description {
        font-size: 14px;
    }

    /* Contact us section */
    .contact-us__headline {
        font-size: 32px;
    }

    .contact-us__description {
        font-size: 24px;
    }

    /* Blog page */
    .blog {
        padding-top: 16px;
    }

    .about-cars__social-image {
        width: 32px;
        height: 32px;
    }

    .about-cars__social li:last-child .about-cars__social-image {
        width: 46px;
    }

    /* Blog article page */
    .blog-article__date {
        margin-bottom: 16px;
    }

    .blog-article__decor.decor {
        top: 110px;
    }

    .blog-article__decor.decor-stroke {
        top: 90px;
    }
}

@media  (max-width: 960px) {
    /* Contact us */
    .contact {
        padding-top: 40px;
    }

    /* Blog page */
    /* About cars section */
    .about-cars {
        background-position: 50% 57%;
    }
    
    .about-cars__headline {
        font-size: 48px;
    }

    .about-cars__social-description {
        font-size: 24px;
    }

    .about-cars__decor {
        position: relative;
        right: unset;
        bottom: unset;
        left: unset;
        font-size: 72px;
        transform: unset;
    }

    /* Blog article page */
    .blog-article__headline {
        line-height: var(--line-height-large);
        font-size: 24px;
    }

    .blog-article__decor.decor {
        top: 95px;
        left: 200px;
        height: 300px;
        width: 400px;
    }

    .blog-article__decor.decor-stroke {
        top: 80px;
        left: 150px;
        height: 300px;
        width: 400px;
    }
}

@media (max-width: 900px) {
    /* Buying process section */
    .buying-process__item {
        grid-template-columns: 1fr;
        grid-row-gap: 16px;
        padding-left: 16px;
    }

    .buying-process__item-content {
        padding-right: 64px;
        font-size: 16px;
        /*background-color: rgba(111, 111, 111, 0.85);*/
        border: 1px solid rgba(111, 111, 111, 0.85);
        border-top-left-radius: var(--border-radius-medium);
        border-bottom-left-radius: var(--border-radius-medium);
    }

    .buying-process__item_active .buying-process__item-content {
        border-color: transparent;
    }

    .buying-process__icon {
        width: 24px;
        height: 24px;
    }

    .buying-process__arrow {
        position: absolute;
        top: 50%;
        right: 24px;
        display: block;
        fill: var(--color-white);
        transform: translateY(-50%) rotate(90deg);
        transition: .2s;
    }

    .buying-process__item_active .buying-process__arrow {
        transform: translateY(-50%) rotate(-90deg);
    }

    .buying-process__image {
        position: relative;
        display: none;
        justify-self: center;
        width: 100%;
        max-width: 660px;
    }

    .buying-process__item_active .buying-process__image {
        display: flex;
    }
}

@media (max-width: 768px) {
    /* Home page */
    /* Hero section */
    .hero__wrapper {
        padding-left: 16px;
        padding-right: 16px;
        max-height: 400px;
    }

    .hero__image {
        object-position: 20% 50%;
    }

    .hero__item {
        font-size: 18px;
    }

    .makers__wrapper:before,
    .makers__wrapper:after {
        top: 50%;
    }

    .makers {
        position: relative;
        bottom: unset;
        margin-top: 24px;
    }
    
    .search-cars {
        position: static;
        margin-top: 48px;
        margin-left: 16px;
        max-width: unset;
        width: calc(100% - 32px);
    }

    /* About us section */
    .about-us {
        padding-top: 40px;
    }

    .about-us__description {
        width: 100%;
    }

    .about-us__decor.decor {
        top: -210px;
        right: -190px;
        height: 500px;
    }

    .about-us__decor.decor-stroke {
        top: -190px;
        right: -220px;
        height: 500px;
    }

    .about-us__cars {
        justify-content: end;
        margin-top: 50px;
    }

    .about-us__image {
        margin-top: 0;
        margin-right: 0;
    }

    .about-us__button {
        padding: 12px 80px;
    }
    
    /* Popular cars section */
    .popular-cars__headline {
        font-size: 24px;
    }

    .popular-cars__button {
        padding: 6px;
    }

    .popular-cars__button-label {
        display: none;
    }

    /* Countries section */
    .countries {
        grid-template-columns: 1fr;
        grid-row-gap: 32px;
    }

    .countries__decor.decor {
        top: 50%;
        right: -70px;
        height: 250px;
        width: 360px;
    }

    .countries__decor.decor-stroke {
        top: calc(50% - 15px);
        right: -10px;
        left: unset;
        height: 250px;
        width: 360px;
    }

    .countries__map {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
    }

    /* Services section */
    .social__link {
        grid-template-columns: auto;
        grid-column-gap: 0;
    }

    .social__icon-decor {
        width: 56px;
        height: 56px;
    }

    .social__list span {
        display: none;
    }

    /* Socials section */
    .social {
        padding-top: 0;
    }

    /* Contact us section */
    .contact-us__right {
        margin-left: 0;
    }

    /* Contact us section */
    /* Contact us */
    .contact {
        padding-top: 20px;
    }

    .contact-us__content {
        grid-template-columns: 1fr;
    }

    .contact-us__wrapper {
        margin-bottom: 36px;
    }

    .contact-us__decor.decor {
        top: -100px;
        right: 360px;
    }

    .contact-us__decor.decor-stroke {
        top: -100px;
        right: 320px;
    }

    /* Catalog page */
    .filter__options {
        grid-template-columns: 1fr 1fr;
        grid-column: 1 / 3;
    }

    .filter__options .filter__select:first-child {
        grid-column: unset;
    }

    .filter__options .filter__select:nth-child(2) {
        grid-column: unset;
    }

    .result {
        grid-auto-flow: unset;
        grid-template-columns: 1fr;
        grid-row-gap: 24px;
    }

    .sort__option {
        grid-column-gap: 8px;
    }

    .catalog {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Product page */
    .product {
        grid-template-columns: minmax(328px, 1fr);
    }

    .product__header {
        display: grid;
        grid-column: unset;
        grid-auto-flow: unset;
        grid-template-columns: 1fr;
        grid-row-gap: 16px;
        margin-bottom: 0;
    }

    .product__print {
        justify-self: end;
        order: -1;
    }

    .product__info {
        grid-column: unset;
        grid-row: unset;
    }

    .similar-cars__list {
        grid-template-columns: repeat(2, 1fr);
    }

    .similar-cars__list .card:not(:nth-child(-n+2)) {
        display: none;
    }

    /* Contact us page */
    .contact {
        grid-template-columns: minmax(312px, 500px) minmax(100px, auto);
        grid-row-gap: 48px;
    }

    .contact__description {
        width: 70%;
    }

    .contact__form {
        grid-column: 1 / 3;
        grid-row: 2 / 3;
        justify-self: center;
        width: 330px;
    }

    .contact__toyota {
        margin: auto -100px 0 -100px;
        max-width: 260px;
    }

    .contact__porsche {
        display: none;
    }

    .contact__decor.decor {
        top: 200px;
        left: -350px;
        height: 820px;
    }

    .contact__decor.decor-stroke {
        top: 180px;
        left: -290px;
        height: 820px;
    }

    .map {
        height: 527px;
    }

    /* About us page */
    .about {
        grid-template-columns: 1fr;
    }

    .about__image {
        grid-row: 2 / 3;
    }

    .about__description {
        margin-top: 12px;
    }

    /* Car auction section */
    .car-auction__content {
        grid-template-columns: 1fr;
    }

    .car-auction__wrapper {
        grid-row: 3 / 4;
    }

    .car-auction__button {
        width: 100%;
    }

    .car-auction__images {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
        grid-template-columns: minmax(206px, 1fr) minmax(101px, 210px);
        grid-gap: 20px;
    }

    .car-auction__certified {
        grid-column: 2 / 3;
        grid-row: 1 / 3;
        align-self: center;
    }

    /* Best choice section */
    .best-choice__content {
        grid-template-columns: 1fr;
        grid-row-gap: 40px;
    }

    .best-choice__image {
        max-width: unset;
    }

    /* Blog page */
    /* About cars section */
    .about-cars {
        grid-auto-flow: unset;
        grid-template-columns: 1fr;
        grid-row-gap: 24px;
        justify-items: center;
        text-align: center;
    }

    .about-cars__wrapper {
        justify-items: center;
    }

    .about-cars__description {
        font-size: 18px;
        color: var(--color-white);
    }

    .about-cars__headline {
        font-size: 32px;
    }

    .about-cars__button {
        padding: 12px 74px;
    }

    .about-cars__social-image {
        width: 36px;
        height: 36px;
    }

    .about-cars__social li:last-child .about-cars__social-image {
        width: 51px;
    }

    .about-cars__social {
        justify-self: center;
    }

    .about-cars__decor {
        justify-self: center;
        font-size: 54px;
    }

    /* Blog article page */
    .blog-article {
        grid-template-columns: 1fr;
    }

    .blog-article__date {
        font-size: 16px;
    }

    .blog-article__headline {
        margin-bottom: 24px;
    }

    .blog-article__decor.decor {
        top: 70px;
        left: 220px;
        height: 340px;
        width: 450px;
    }

    .blog-article__decor.decor-stroke {
        top: 50px;
        left: 150px;
        height: 300px;
        width: 400px;
    }

    .blog-article__box {
        grid-column: 1 / 2;
    }

    .blog-article__content {
        padding: 32px 16px;
    }

    /* Error page */
    .error-page__image {
        margin-top: 60px;
        max-width: 320px;
    }
}

@media (max-width: 600px) {
    /* Contact us section */
    .contact-us__right {
         margin-left: -100px;
    }
}

@media (max-width: 480px) {
    /* Home page */
    /* Hero section */
    .hero__wrapper {
        padding-top: calc(80px + var(--header-height));
    }

    .hero__headline {
        font-size: 32px;
    }

    .search-cars__form .search-cars__input:first-child {
        grid-column: 1 / 3;
    }

    .search-cars__form .search-cars__input:nth-child(2) {
        grid-column: 1 / 3;
    }

    /* About us section */
    .about-us {
        padding-top: 48px;
        padding-bottom: 0;
    }

    .about-us__headline {
        width: 80%;
    }

    .about-us__headline-description {
        width: 70%;
    }

    .about-us__button {
        width: 100%;
    }

    .about-us__info {
        grid-row: 4 / 5;
    }

    .about-us__cars {
        grid-row: 3 / 4;
        margin-bottom: 100px;
    }

    .about-us__decor.decor {
        top: -230px;
        right: -240px;
    }

    .about-us__decor.decor-stroke {
        top: -200px;
        right: -280px;
    }

    /* Popular cars */
    .popular-cars {
        padding-top: 48px;
    }

    /* Countries section */
    .countries__headline {
        font-size: 24px;
    }

    .countries__decor.decor {
        right: -240px;
    }

    .countries__decor.decor-stroke {
        right: -180px;
    }

    /* Contact us section */
    .contact-us__description {
        width: 75%;
    }

    .contact-us__decor.decor {
        top: -70px;
        right: 450px;
    }

    .contact-us__decor.decor-stroke {
        top: -80px;
        right: 420px;
    }

    /* Catalog page */
    .result__name {
        grid-auto-flow: unset;
        grid-template-columns: 1fr;
    }

    .sort__option {
        grid-auto-flow: unset;
        grid-template-columns: 200px;
        grid-row-gap: 8px;
    }

    .sort__option_show {
        grid-template-columns: 100px;
    }

    /* Product page */
    .product__thumb-icon {
        width: 24px;
        height: 24px;
    }

    .product__form {
        grid-template-columns: 1fr;
    }

    .product__textarea {
        grid-column: unset;
    }

    .product__form-button {
        grid-column: unset;
    }

    /* Contact us page */
    .contact {
        grid-template-columns: minmax(312px, 500px) minmax(1px, auto);
        grid-column-gap: 1px;
        grid-row-gap: 48px;
    }

    .contact__description {
        width: 90%;
    }

    .contact__toyota {
        display: none;
    }

    .contact__decor.decor {
        top: 300px;
        left: -440px;
        height: 700px;
    }

    .contact__decor.decor-stroke {
        top: 280px;
        left: -390px;
        height: 700px;
    }

    /* About us page */
    /* Car auctions section */
    .car-auction {
        padding-top: 40px;
    }

    .car-auction__headline {
        max-width: 75%;
        text-align: left;
    }

    .car-auction__headline.headline:after {
        top: 40px;
        right: -15px;
        height: 80px;
    }

    /* Best choice section */
    .best-choice {
        padding-top: 40px;
    }

    .best-choice__headline {
        max-width: 65%;
        text-align: left;
    }

    .best-choice__headline.headline:after {
        top: 40px;
        right: -15px;
        height: 80px;
    }

    /* Blog page */
    /* About cars section */
    .about-cars__button {
        justify-self: unset;
        width: unset;
    }

    /* Error page */
    .error-page__image {
        margin-top: 110px;
        margin-bottom: 24px;
    }
}