@media (max-width: 820px) {
    .destination-hero {
        align-items: flex-start;
    }

    .destination-hero-content {
        padding-block: 2rem 0;
    }

    .listing-tabs {
        position: relative;
        top: auto;
        z-index: 12;
        margin: -6.35rem 1rem 0;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, .34);
        border-radius: 1.2rem;
        background: rgba(14, 57, 46, .72);
        box-shadow: 0 1rem 2.4rem rgba(10, 38, 31, .22);
        backdrop-filter: blur(14px);
    }

    .listing-tabs .shell {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: .35rem;
        padding: .5rem;
        overflow: visible;
    }

    .listing-tabs a {
        display: flex;
        align-items: center;
        min-height: 2.45rem;
        padding: .5rem .78rem;
        border: 1px solid rgba(255, 255, 255, .1);
        border-radius: .8rem;
        background: rgba(255, 255, 255, .07);
        color: rgba(255, 255, 255, .82);
        font-size: .78rem;
        font-weight: 750;
        line-height: 1.2;
        white-space: normal;
    }

    .listing-tabs a:not(.active)::before {
        width: .35rem;
        height: .35rem;
        flex: none;
        margin-right: .6rem;
        border-radius: 999px;
        background: rgba(250, 196, 154, .8);
        content: "";
    }

    .listing-tabs a.active {
        order: -1;
        min-height: 3.65rem;
        padding: .8rem .9rem;
        border: 1px solid rgba(255, 255, 255, .36);
        border-bottom: 1px solid rgba(255, 255, 255, .36);
        border-radius: .95rem;
        background: linear-gradient(110deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, .1));
        color: #fff;
        font-size: 1.22rem;
        font-weight: 850;
        letter-spacing: -.025em;
        box-shadow: inset .22rem 0 0 var(--orange), 0 .35rem .8rem rgba(4, 28, 22, .15);
    }

    .listing-tabs a:focus-visible {
        outline: 3px solid #f9bc90;
        outline-offset: 2px;
    }

    .listing-tabs + .section {
        padding-top: 2.5rem;
    }

    #destination-details {
        scroll-margin-top: 5.4rem;
    }
}

@media (max-width: 540px) {
    .listing-tabs {
        margin: -6rem .75rem 0;
        border-radius: 1.05rem;
    }

    .listing-tabs .shell {
        gap: .3rem;
        padding: .4rem;
    }

    .listing-tabs a {
        min-height: 2.3rem;
        padding: .45rem .7rem;
        font-size: .75rem;
    }

    .listing-tabs a.active {
        min-height: 3.4rem;
        font-size: 1.12rem;
    }
}