/* Responsive Layout Configuration */

/* max-w-container-max: ширина = 95% от ширины экрана */
.max-w-container-max {
    max-width: 100% !important;
    margin-left: auto;
    margin-right: auto;
}

/* Vehicle Grid Responsive Columns */
/* меньше 960px - 1 колонка */
@media (max-width: 959px) {
    #vehicleList {
        display: grid;
        grid-template-columns: repeat(1, minmax(0, 1fr));
        gap: 24px; /* gap-gutter */
    }
}

/* 960px - 1199px - 2 колонки */
@media (min-width: 960px) and (max-width: 1199px) {
    #vehicleList {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }
}

/* 1200px - 1599px - 3 колонки */
@media (min-width: 1200px) and (max-width: 1599px) {
    #vehicleList {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 24px;
    }
}

/* 1600px - 1919px - 4 колонки */
@media (min-width: 1600px) and (max-width: 1919px) {
    #vehicleList {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 24px;
    }
}

/* 1920px - 2199px - 4 колонки */
@media (min-width: 1920px) and (max-width: 2199px) {
    #vehicleList {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 24px;
    }
}

/* 2200px - 2800px - 5 колонок */
@media (min-width: 2200px) and (max-width: 2799px) {
    #vehicleList {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 24px;
    }
}

/* выше 2800px - 5 колонок */
@media (min-width: 2800px) {
    #vehicleList {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 24px;
    }
}

/* Хинты для поиска */
#hintsContainer {
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    #hintsContainer {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Загрузка (skeleton) */
#loading {
    display: grid;
    gap: 24px;
}

@media (max-width: 959px) {
    #loading {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

@media (min-width: 960px) and (max-width: 1199px) {
    #loading {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) and (max-width: 1599px) {
    #loading {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1600px) {
    #loading {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}