.cars {
    padding-top: 95px;
    padding-bottom: 160px;
}

.cars h1 {
    font-size: 24px;
    font-weight: 700;
    line-height: 132%;
}

.cars-in-stock {
    font-size: 16px;
    font-weight: 300;
    line-height: 132%;
    margin-top: 3px;
}

.cars-in-stock span {
    color: var(--color-accent);
}

.cars form {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 21px;
    margin-top: 15px;
}

.cars form .brand-model {
    grid-column: 1 / 3;
    display: grid;
    gap: 21px;
    grid-template-columns: 1fr 1fr;
}

.cars form .year-fuel {
    grid-column: 3 / 5;
    display: grid;
    gap: 21px;
    grid-template-columns: 1fr 1fr;
}

.cars form .ranges {
    grid-column: 1 / 6;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 21px;
}

.cars form button[type=submit] {
    place-self: start;
}

.cars-no-results {
    margin-top: 64px;
    font-size: 24px;
    font-weight: 700;
    line-height: 132%;
    padding-bottom: 111px;
}

.cars-no-results a {
    margin-top: 13px;
}

.cars-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 29px;
    margin-top: 173px;
}

.cars button.load-more {
    display: block;
    margin: 26px auto 0;
}

@media (max-width: 919px) {
    .cars {
        padding-top: 61px;
        padding-bottom: 128px;
    }

    .cars form {
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }

    .cars form .brand-model {
        grid-column: 1 / 4;
    }

    .cars form .year-fuel {
        grid-column: 1 / 3;
    }

    .cars form .ranges {
        grid-column: 1 / 4;
    }

    .cars form button[type=submit] {
        margin-top: 4px;
    }

    .cars-list {
        margin-top: 64px;
        grid-template-columns: repeat(2, 1fr);
        gap: 28px;
    }

    .cars button.load-more {
        margin-top: 32px;
    }

    .cars-no-results {
        margin-top: 32px;
        padding-bottom: 0;
    }

    .cars-no-results a {
        margin-top: 24px;
    }
}


@media (max-width: 743px) {
    .cars {
        padding-top: 90px;
    }

    .cars form {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .cars form .brand-model {
        grid-column: auto;
        grid-template-columns: 1fr;
    }

    .cars form .year-fuel {
        grid-column: auto;
        grid-template-columns: 1fr 1fr;
    }

    .cars form .ranges {
        grid-column: auto;
        grid-template-columns: 1fr;
    }

    .cars-list {
        margin-top: 32px;
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .cars-no-results a {
        margin-top: 32px;
    }
}