.hh-card-find {
    display: flex;
    flex-direction: column;
    background-color: var(--light-00);
    border-radius: 8px;
    overflow: hidden;
    width: 100%;
}

.hh-card-find header {
    background-color: var(--blue-80);
    padding: 12px 24px;
}

.hh-card-find header h3,
.hh-card-find header p {
    color: var(--light-00);
}

.hh-card-find main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 16px 24px;
    gap: 8px;
}

.hh-card-find footer {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 16px 24px;
    gap: 8px;
}

.hh-essential-card {
    max-width: 584px;
    background-color: var(--light-00);
    border-radius: 8px;
    overflow: hidden;
    gap: 16px;
}

.hh-essential-card div, .hh-essential-card main {
    display: flex;
}

.hh-essential-card div {
    justify-content: center;
    align-items: center;
    padding: 16px 0 16px 16px;
}

.hh-essential-card main {
    align-items: flex-start;
    justify-content: flex-start;
    padding: 16px 0;
    gap: 4px;
}

.hh-essential-card span {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--blue-80);
    padding: 8px;
}

.hh-essential-card h5 {
    color: var(--blue-80);
}

.hh-essential-card p {
    color: var(--dark-30);
}

@media screen and (max-width: 964px) {
    .hh-card-find {
        max-width: var(--sm);
        height: 63px;
        transition: all 0.3s;
    }

    .hh-card-find header {
        position: relative;
        height: 64px;
    }

    .hh-card-find header::before {
        content: "";
        background-image: url('/content/new/icons/chevron-bottom.svg');
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 32px;
        position: absolute;
        width: 32px;
        height: 32px;
        right: 16px;
        top: 16px;
        transition: all 0.3s;
    }

    .hh-card-find footer {
        flex-direction: row-reverse;
    }

    .mob-hh-card-find-open {
        height: 320px;
    }

    .mob-hh-card-find-open header::before {
        transform: rotate(180deg);
        opacity: 0.2;
    }
}

@media screen and (max-width: 400px) {
    .hh-card-find footer {
        flex-direction: column-reverse;
    }
}

.dh-container-mod {
    background-image: linear-gradient(90deg, #030D23 0%, rgba(5, 12, 29, 0) 100%), url(/content/new/images/destinations-hero-lg.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.dh-selector {
    max-width: 584px;
}