/* Dark card (travel, plans, join): 1202.915×602 like the design's mask, #020402, copy panel 602px on the left
   (64/80 padding). --fade: the media fades into the card between 276.6 and 467px from the left (design's mask). */
.znh-dark {
    position: relative;
    width: 1202.915px;
    height: 602px;
    overflow: hidden;
    border-radius: 24px;
    background: #020402;
}

.znh-dark__media {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.znh-dark__media--fade {
    -webkit-mask-image: linear-gradient(90deg, transparent 276.595px, #000 466.957px);
    mask-image: linear-gradient(90deg, transparent 276.595px, #000 466.957px);
}

.znh-dark__copy {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 602px;
    height: 602px;
    padding: 64px 80px;
}

.znh-dark .znh-panel__title {
    color: #fff;
}

.znh-dark .znh-panel__body {
    color: var(--znh-off-white);
}

@media (max-width: 899px) {
    .znh .znh-dark {
        width: 100%;
        border-radius: 17px;
    }

    .znh-dark__media--fade {
        -webkit-mask-image: none;
        mask-image: none;
    }

    .znh-dark__copy {
        position: absolute;
        inset: 0;
        width: auto;
        height: auto;
    }
}