.tnk.v2 {
    position: relative;

    /* The background photo is a PNG. The global picture rules default PNGs to
       object-fit: contain (treating them as foreground/logo art), which letterboxes
       the image instead of filling the section. Force cover so it behaves like a
       proper background, the same as the .jpg backgrounds used elsewhere. */
    > .bg img[src] {
        object-fit: cover;
    }

    > .flx-at-1280 {
        position: relative;
        z-index: 1;
    }

    .tnk-v2-shape {
        display: flex;
        align-items: center;
        justify-content: center;

        svg {
            width: 100%;
            height: auto;
            max-width: 33.69rem;
        }

        @media screen and (min-width: 1280px) {
            justify-content: flex-end;
        }
    }
}

.tnk.v1 {

    .bg-bx {
        position: relative;
        text-decoration: none;
        padding: 1.78rem 1.67rem;

        --fnt-t-nt-s: .89rem;
        --fnt-t-nt-tt: uppercase;
        --fnt-t-nt-w: 700;
        --fnt-t-nt-ff: var(--fnt-t);

        .icn {
            font-size: 2.5rem;
        }

        strong.fnt_pl {
            font-family: var(--fnt-t);
            line-height: 1.2;
            color: var(--accent);
            font-weight: 700;
        }
    }

    .bdg-badge {
        position: absolute;
        top: .67rem;
        right: .67rem;
        display: inline-flex;
        align-items: center;
        gap: .33rem;
        font-size: .667rem;
        font-weight: 700;
        color: #4CAF50;
        border: 1px solid var(--bdr-clr);
        border-radius: 2rem;
        padding: .22rem .89rem;
        background-color: var(--text-alt);
        width: auto !important;
    }

    .bdg-dot {
        width: .5rem;
        height: .5rem;
        border-radius: 50%;
        background: #4CAF50;
    }

    svg.chev {
        font-size: 1.33rem;
        flex-shrink: 0;
    }
}