/* Feature panel: 602px white copy panel (64/72/64/80, overline+title at the top, body+button at the bottom)
   + a 602px media square (corners 26.03px like the design's mask). */
.znh-feature {
    display: flex;
    align-items: center;
}

.znh-feature__copy {
    display: flex;
    flex: none;
    flex-direction: column;
    justify-content: space-between;
    width: 602px;
    height: 602px;
    padding: 64px 72px 64px 80px;
    border-radius: 24px;
    background: #fff;
}

.znh-feature__media {
    position: relative;
    flex: none;
    width: 602px;
    height: 602px;
    overflow: hidden;
    border-radius: 26.0324px;
    background: #0B0C0C;
}

.znh-feature__canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.znh .znh-feature__video {
    position: absolute;
    max-width: none;
    object-fit: cover;
}

@media (max-width: 899px) {
    /* media on top, white panel below */
    .znh-feature {
        flex-direction: column;
        align-items: stretch;
    }

    .znh-feature--one-app {
        margin-top: 34px;
    }

    .znh-feature--shopping {
        margin-top: 22px;
    }

    .znh .znh-feature__media {
        order: 0;
        width: 100%;
        height: auto;
        border-radius: 17px;
        aspect-ratio: 1;
    }

    .znh-feature__copy {
        order: 1;
        width: auto;
        height: auto;
        min-height: 327px;
        margin-top: 3px;
        padding: 39px 30px 30px;
        border-radius: 17px;
    }

    .znh-feature__copy .znh-panel__title {
        width: 237px;
    }

    .znh-feature__copy .znh-panel__foot {
        margin-top: 40px;
    }
}