.locations-grid {
    /* ===== PARAMETRI BASE ===== */

    /* numero di card visibili nello spazio */
    --cards-visible: 3;

    /* larghezza ORIGINALE di una card (quando erano 5) */
    --base-card-width: 260px;

    /* numero di card originali (serve per mantenere la stessa larghezza totale) */
    --base-cards-count: 5;

    /* spazio tra le card */
    --card-gap: 1.5rem;

    /* ===== CALCOLI ===== */

    /* larghezza totale originale (NON cambia) */
    --total-width: calc((var(--base-card-width) * var(--base-cards-count)) + (var(--card-gap) * (var(--base-cards-count) - 1)));

    /* nuova larghezza di UNA card */
    --current-card-width: calc((var(--total-width) - (var(--card-gap) * (var(--cards-visible) - 1))) / var(--cards-visible));

    /* ===== LAYOUT ===== */

    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: var(--current-card-width);
    gap: var(--card-gap);

    max-width: var(--total-width);

    overflow-x: auto;
    overflow-y: hidden;

    scroll-snap-type: x mandatory;
    background-color: var(--background);
}


.location-card {
    background: var(--background-alt);
    scroll-snap-align: start;
    border-radius: var(--radius-sm);
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
    position: relative;
    cursor: pointer;
}

.location-card__image {
    width: 100%;
    height: 240px;
    object-fit: cover;
    display: block;
    border-radius: inherit;
}

.location-name-overlay {
    position: absolute;
    bottom: 24px;
    left: 24px;
    z-index: 10;
}

.location-name {
    font-size: 35px;
    font-weight: bold;
    color: var(--background-alt);
    position: relative;
    z-index: 11;
    line-height: 1;
}


.location-animator {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0;
    background: var(--primary-color);
    z-index: 9;
    transition: height 0.3s ease;
}

.location-card:hover .location-animator,
.location-card:focus-within .location-animator {
    height: 60px;
}

/*NAVIGAZIONE*/
.locations-arrows {
    gap: var(--spacing-sm);
}

.location-arrow {
    width: 44px;
    height: 44px;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.location-arrow:hover {
    color: var(--primary-hover);
}

@media (max-width: 768px) {
    .locations-arrows {
        display: none;
    }
}