/*
|--------------------------------------------------------------------------
| Destinations Layout
|--------------------------------------------------------------------------
*/

.destinations {

    padding-top: calc(var(--header-height) + var(--space-3xl));

    padding-bottom: var(--space-4xl);

}


/*
|--------------------------------------------------------------------------
| Hero
|--------------------------------------------------------------------------
*/

.destinations-hero {

    max-width: 760px;

    margin: 0 auto;

    padding: 3rem 0 2rem;

    text-align: center;

}


.destinations-hero__eyebrow {

    display: inline-flex;

    margin-bottom: 1rem;

    color: var(--primary);

    font-size: var(--font-sm);

    font-weight: var(--fw-bold);

    letter-spacing: .12em;

    text-transform: uppercase;

}


.destinations-hero__title {

    margin-bottom: 1.25rem;

    font-size: clamp(2.25rem, 5vw, 3.5rem);

    font-weight: var(--fw-extra-bold);

    line-height: 1.15;

}


.destinations-hero__description {

    max-width: 720px;

    margin: 0 auto;

    color: var(--text-light);

    font-size: 1.05rem;

    line-height: 1.8;

}


/*
|--------------------------------------------------------------------------
| Destination List
|--------------------------------------------------------------------------
*/

.destinations-list {

    padding-top: var(--space-xl);

    padding-bottom: var(--space-4xl);

}


/*
|--------------------------------------------------------------------------
| Destination Grid
|--------------------------------------------------------------------------
*/

.destinations-list .row {

    --bs-gutter-x: 2rem;

    --bs-gutter-y: 2rem;

}


/*
|--------------------------------------------------------------------------
| Empty State
|--------------------------------------------------------------------------
*/

.destinations-empty {

    padding: var(--space-6xl);

    text-align: center;

}


.destinations-empty-title {

    margin-bottom: var(--space-md);

    font-size: var(--font-3xl);

    font-weight: var(--fw-bold);

}


.destinations-empty-description {

    max-width: 520px;

    margin: 0 auto;

    color: var(--text-light);

    line-height: 1.7;

}


/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/

@media (max-width: 991.98px) {

    .destinations {

        padding-top: calc(var(--header-height) + var(--space-4xl));

        padding-bottom: var(--space-4xl);

    }


    .destinations-hero {

        padding-top: 2.5rem;

    }


    .destinations-list .row {

        --bs-gutter-x: 1.5rem;

        --bs-gutter-y: 1.75rem;

    }

}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 767.98px) {

    .destinations {

        padding-top: calc(var(--header-height) + var(--space-3xl));

        padding-bottom: var(--space-3xl);

    }


    .destinations-hero {

        padding: 2rem 0 1.5rem;

        text-align: left;

    }


    .destinations-hero__title {

        font-size: 2rem;

    }


    .destinations-hero__description {

        font-size: .95rem;

        line-height: 1.7;

    }


    .destinations-list {

        padding-top: var(--space-lg);

        padding-bottom: var(--space-3xl);

    }


    .destinations-list .row {

        --bs-gutter-x: 1rem;

        --bs-gutter-y: 1.5rem;

    }

}


/*
|--------------------------------------------------------------------------
| Small Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 400px) {

    .destinations-hero__title {

        font-size: 1.8rem;

    }


    .destinations-hero__description {

        font-size: .9rem;

    }

}