/*---*\
Half Media / Half Text
Supports white, light blue, and navy image/video layout variants.

KEY FEATURES:
- Media variants: standard image, logo mask, dual overlay, collage, video
- Content: wysiwyg, kicker, accordion, button, stats
- Sticky dual-column layout on desktop
\*---*/

.half-media-half-text {
    width: calc(100% - 52px);
    max-width: 1824px;
    margin-inline: auto;
    border-radius: 32px;
}

.half-media-half-text .container {
    padding-left: 24px;
    padding-right: 24px;
}

.half-media-half-text.bg-light-blue + .bg-light-blue.section-padding,
.half-media-half-text.bg-navy + .bg-navy.section-padding,
.half-media-half-text.bg-light-blue + .bg-navy.section-padding,
.half-media-half-text.bg-navy + .bg-light-blue.section-padding {
    margin-top: var(--section-margins);
}

.half-media-half-text__variant {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.half-media-half-text__media-group {
    position: relative;
    width: 100%;
}

.half-media-half-text__media {
    position: relative;
    border-radius: 16px;
}

.half-media-half-text__media img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    border-radius: 16px;
}

.half-media-half-text__media--placeholder {
    background-color: var(--color-surface-muted);
}

.half-media-half-text__media--full {
    width: 100%;
    max-width: 721px;
    aspect-ratio: 611 / 698.825;
    border-radius: 0;
}

.half-media-half-text__media--full svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Keep the group no wider than the media so the absolutely-positioned
   secondary always anchors to the media's own bottom corner. */
.half-media-half-text__media-group--dual {
    max-width: 498px;
}

.half-media-half-text__variant--reverse .half-media-half-text__media-group--dual {
    max-width: 490px;
}

/* Cut-out mask footprint per breakpoint (mobile here; tablet + desktop below).
   Each breakpoint uses its own mask SVG (--mask-{breakpoint}) whose viewBox
   matches this footprint so the graphic and its 16px corner radius are not
   scaled from a single desktop path. */
.half-media-half-text__media-group--dual > .half-media-half-text__media:not(.half-media-half-text__media--overlay) {
    width: 100%;
    max-width: 276px;
    aspect-ratio: 276 / 322.73;
}

.half-media-half-text__media--mask {
    border-radius: 0;
}

.half-media-half-text__media--mask-tablet,
.half-media-half-text__media--mask-desktop {
    display: none;
}

.half-media-half-text__media-group--dual > .half-media-half-text__media:not(.half-media-half-text__media--overlay) img,
.half-media-half-text__media--mask svg,
.half-media-half-text__media--mask img {
    display: block;
    width: 100%;
    height: 100%;
}

.half-media-half-text__media--overlay {
    display: none;
    position: absolute;
    right: 16px;
    bottom: 16px;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background-color: var(--color-white);
}

.bg-light-blue .half-media-half-text__media--overlay {
    background-color: var(--color-surface-light);
}

.bg-navy .half-media-half-text__media--overlay {
    background-color: var(--color-secondary);
}

.half-media-half-text__variant--reverse .half-media-half-text__media--overlay {
    right: auto;
    left: -14px;
}

.half-media-half-text__media .half-media-half-text__media-small-image {
    position: relative;
    z-index: 1;
    width: 333px;
    height: 255px;
    -o-object-fit: cover;
       object-fit: cover;
    border-radius: 16px;
}

.half-media-half-text__media-group--collage {
    display: flex;
    align-items: end;
    justify-content: flex-start;
}

.half-media-half-text__media--collage-main {
    width: 100%;
    aspect-ratio: 276 / 220.69;
}

.half-media-half-text__media--collage-top {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    width: 333px;
    height: 255px;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background-color: var(--color-white);
}

.bg-light-blue .half-media-half-text__media--collage-top {
    background-color: var(--color-surface-light);
}

.bg-navy .half-media-half-text__media--collage-top {
    background-color: var(--color-secondary);
}

.half-media-half-text__media--collage-top .half-media-half-text__media-small-image {
    position: absolute;
    top: auto;
    bottom: 16px;
    left: 16px;
    width: 301px;
    height: 348px;
    -o-object-fit: cover;
       object-fit: cover;
}

.half-media-half-text__media--collage-top--left .half-media-half-text__media-small-image {
    left: auto;
    right: 16px;
}

.half-media-half-text__media-group--video .half-media-half-text__media {
    display: block;
    overflow: hidden;
    cursor: pointer;
    text-decoration: none;
}

.half-media-half-text__media-group--video .half-media-half-text__media img {
    height: 100%;
    transition: -webkit-transform 0.35s ease;
    transition: transform 0.35s ease;
    transition: transform 0.35s ease, -webkit-transform 0.35s ease;
}

.half-media-half-text__play-overlay {
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: end;
    justify-content: end;
    line-height: 0;
}

.half-media-half-text__play {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 24px;
    border: 0;
    border-radius: 16px 0 0 0;
    background-color: var(--color-white);
    font: inherit;
    text-decoration: none;
}

.bg-light-blue .half-media-half-text__play {
    background-color: var(--color-surface-light);
}

.bg-navy .half-media-half-text__play {
    background-color: var(--color-secondary);
}

.half-media-half-text__play-overlay::before {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none"><path d="M32 8.72727C32 21.5804 21.5804 32 8.72727 32H0H32V0V8.72727Z" fill="%23FFFFFF"/></svg>');
    display: block;
    position: absolute;
    top: -32px;
    right: 0;
    width: 32px;
    height: 32px;
}

.bg-light-blue .half-media-half-text__play-overlay::before {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none"><path d="M32 8.72727C32 21.5804 21.5804 32 8.72727 32H0H32V0V8.72727Z" fill="%23F3F6FB"/></svg>');
}

.bg-navy .half-media-half-text__play-overlay::before {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none"><path d="M32 8.72727C32 21.5804 21.5804 32 8.72727 32H0H32V0V8.72727Z" fill="%231C355E"/></svg>');
}

.half-media-half-text__play-overlay::after {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none"><path d="M32 8.72727C32 21.5804 21.5804 32 8.72727 32H0H32V0V8.72727Z" fill="%23FFFFFF"/></svg>');
    display: block;
    position: absolute;
    bottom: 0;
    left: -32px;
    width: 32px;
    height: 32px;
}

.bg-light-blue .half-media-half-text__play-overlay::after {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none"><path d="M32 8.72727C32 21.5804 21.5804 32 8.72727 32H0H32V0V8.72727Z" fill="%23F3F6FB"/></svg>');
}

.bg-navy .half-media-half-text__play-overlay::after {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none"><path d="M32 8.72727C32 21.5804 21.5804 32 8.72727 32H0H32V0V8.72727Z" fill="%231C355E"/></svg>');
}

.half-media-half-text__play-icon {
    display: block;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    z-index: 2;
    transition: -webkit-transform 0.35s ease;
    transition: transform 0.35s ease;
    transition: transform 0.35s ease, -webkit-transform 0.35s ease;
}

.half-media-half-text__play-label {
    display: none;
    z-index: 2;
    color: var(--color-secondary);
    font-family: var(--font-body);
    font-size: var(--font-size-body-large);
    font-weight: 700;
    line-height: var(--line-height-body-large);
}

.bg-navy .half-media-half-text__play-label {
    color: var(--color-text-inverse);
}

.half-media-half-text__content > * + * {
    margin-top: 20px;
}

.half-media-half-text__content > .sub-heading + *,
.half-media-half-text__content > [class$="__kicker"] + * {
    margin-top: var(--space-kicker-heading);
}

.half-media-half-text__content p {
    color: var(--color-text-heading);
    margin-bottom: 0;
}

.half-media-half-text__content blockquote p,
.half-media-half-text__accordion-item blockquote p {
    color: inherit;
}

.half-media-half-text__kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    padding: 8px 16px;
    border: 1px solid var(--color-surface-muted);
    border-radius: 8px;
    color: var(--color-secondary);
    font-family: var(--font-heading);
    font-size: var(--font-size-subheading);
    font-weight: var(--font-weight-subheading);
    line-height: var(--line-height-heading);
}

.half-media-half-text__kicker i {
    font-size: 13px;
}

.half-media-half-text__accordion {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0;
}

.half-media-half-text__accordion-item {
    padding: 16px 0;
    border-bottom: 1px solid var(--color-surface-light-alt);
    transition: border-color var(--transition-base) var(--transition-ease);
}

.half-media-half-text__accordion-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-text-heading);
    cursor: pointer;
    font-family: var(--font-body);
    font-size: var(--font-size-body-large);
    font-weight: 700;
    line-height: var(--line-height-body-large);
    text-align: left;
    transition: color var(--transition-base) var(--transition-ease);
}

.half-media-half-text__accordion-label i {
    flex-shrink: 0;
    transition: color var(--transition-base) var(--transition-ease);
}

.half-media-half-text__accordion-label:hover,
.half-media-half-text__accordion-label:focus-visible {
    color: var(--color-primary);
}

.half-media-half-text__accordion-item--active .half-media-half-text__accordion-label {
    color: var(--color-primary);
}

.half-media-half-text__accordion-panel {
    overflow: hidden;
}

.half-media-half-text__accordion-panel[hidden] {
    display: none;
}

.half-media-half-text__accordion-item p {
    color: var(--color-text-body);
    margin-top: 20px;
}

.half-media-half-text__button {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}

.half-media-half-text__stats {
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-top: 48px;
}

.half-media-half-text__stat {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.half-media-half-text__stat strong {
    display: block;
    color: var(--color-text-heading);
    font-family: var(--font-heading);
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-heading);
    line-height: var(--line-height-heading);
}

.half-media-half-text__stat span {
    color: var(--color-text-body);
    font-family: var(--font-body);
    font-size: var(--font-size-body-large);
    font-weight: var(--font-weight-body);
    line-height: var(--line-height-body-large);
}

.half-media-half-text.bg-navy .half-media-half-text__kicker {
    border-color: transparent;
    background-color: rgba(255, 255, 255, 0.3);
    color: var(--color-text-inverse);
}

.half-media-half-text.bg-navy .half-media-half-text__kicker i:before {
    color: var(--color-text-inverse);
}

.half-media-half-text.bg-navy .icon-minus::before {
    color: var(--border-color-soft);
}

.half-media-half-text.bg-navy .icon-plus::before {
    color: var(--color-text-inverse);
}

.half-media-half-text.bg-navy .half-media-half-text__accordion-item {
    border-color: rgba(250, 248, 245, 0.25);
}

.half-media-half-text.bg-navy .half-media-half-text__accordion-label:hover,
.half-media-half-text.bg-navy .half-media-half-text__accordion-label:focus-visible {
    color: var(--border-color-soft);
}

.half-media-half-text.bg-navy .half-media-half-text__accordion-item--active .half-media-half-text__accordion-label {
    color: var(--border-color-soft);
}

.half-media-half-text a:focus-visible,
.half-media-half-text button:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

@media (min-width: 768px) {
    .half-media-half-text .container {
        padding-left: 84px;
        padding-right: 84px;
    }


    .half-media-half-text__media-group--dual > .half-media-half-text__media:not(.half-media-half-text__media--overlay) {
        max-width: 310.232px;
        height: 362.907px;
        aspect-ratio: 310.232 / 362.907;
    }

    .half-media-half-text__variant--reverse .half-media-half-text__media-group--dual > .half-media-half-text__media:not(.half-media-half-text__media--overlay) {
        margin-left: auto;
    }

    .half-media-half-text__media--mask-mobile {
        display: none;
    }

    .half-media-half-text__media--mask-tablet {
        display: block;
    }

    .half-media-half-text__media--overlay,
    .half-media-half-text__media--collage-top {
        display: flex;
    }

    .half-media-half-text__media--overlay {
        bottom: -16px;
        right: 0;
    }

    .half-media-half-text__media--collage-main {
        width: 489px;
        height: 391px;
    }

    .half-media-half-text__media--collage-top {
        width: 331px;
        height: 245px;
        top: -42px;
        right: -56px;
    }

    .half-media-half-text__media--overlay::before {
        content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none"><path d="M32 8.72727C32 21.5804 21.5804 32 8.72727 32H0H32V0V8.72727Z" fill="%23F3F6FB"/></svg>');
        position: absolute;
        bottom: 16px;
        left: -32px;
        width: 32px;
        height: 32px;
    }

    .bg-light-blue .half-media-half-text__media--overlay::before {
        content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none"><path d="M32 8.72727C32 21.5804 21.5804 32 8.72727 32H0H32V0V8.72727Z" fill="%23F3F6FB"/></svg>');
    }

    .bg-navy .half-media-half-text__media--overlay::before {
        content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none"><path d="M32 8.72727C32 21.5804 21.5804 32 8.72727 32H0H32V0V8.72727Z" fill="%231C355E"/></svg>');
    }

    .half-media-half-text__media--overlay::after {
        content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none"><path d="M32 8.72727C32 21.5804 21.5804 32 8.72727 32H-9.53674e-07H32V-9.53674e-07V8.72727Z" fill="%23FFFFFF"/></svg>');
        position: absolute;
        top: -32px;
        left: 17px;
    }

    .bg-light-blue .half-media-half-text__media--overlay::after {
        content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none"><path d="M32 8.72727C32 21.5804 21.5804 32 8.72727 32H-9.53674e-07H32V-9.53674e-07V8.72727Z" fill="%23F3F6FB"/></svg>');
    }

    .bg-navy .half-media-half-text__media--overlay::after {
        content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none"><path d="M32 8.72727C32 21.5804 21.5804 32 8.72727 32H-9.53674e-07H32V-9.53674e-07V8.72727Z" fill="%231C355E"/></svg>');
    }

    .half-media-half-text__variant--reverse .half-media-half-text__media--overlay::before {
        content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none"><path d="M0 8.72727C0 21.5804 10.4196 32 23.2727 32H32H0V0V8.72727Z" fill="white"/></svg>');
        left: unset;
        right: -32px;
    }

    .bg-light-blue .half-media-half-text__variant--reverse .half-media-half-text__media--overlay::before {
        content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none"><path d="M0 8.72727C0 21.5804 10.4196 32 23.2727 32H32H0V0V8.72727Z" fill="%23F3F6FB"/></svg>');
    }

    .bg-navy .half-media-half-text__variant--reverse .half-media-half-text__media--overlay::before {
        content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none"><path d="M0 8.72727C0 21.5804 10.4196 32 23.2727 32H32H0V0V8.72727Z" fill="%231C355E"/></svg>');
    }

    .half-media-half-text__variant--reverse .half-media-half-text__media--overlay::after {
        content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none"><path d="M0 8.72727C0 21.5804 10.4196 32 23.2727 32H32H0V0V8.72727Z" fill="white"/></svg>');
        top: -32px;
        right: 11px;
    }

    .bg-light-blue .half-media-half-text__variant--reverse .half-media-half-text__media--overlay::after {
        content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none"><path d="M0 8.72727C0 21.5804 10.4196 32 23.2727 32H32H0V0V8.72727Z" fill="%23F3F6FB"/></svg>');
    }

    .bg-navy .half-media-half-text__variant--reverse .half-media-half-text__media--overlay::after {
        content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none"><path d="M0 8.72727C0 21.5804 10.4196 32 23.2727 32H32H0V0V8.72727Z" fill="%231C355E"/></svg>');
    }


    .half-media-half-text__media--collage-top::before {
        content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none"><path d="M32 23.2727C32 10.4196 21.5804 0 8.72727 0H0H32V32V23.2727Z" fill="white"/></svg>');
        position: absolute;
        top: 42px;
        left: -32px;
    }

    .bg-light-blue .half-media-half-text__media--collage-top::before {
        content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none"><path d="M32 23.2727C32 10.4196 21.5804 0 8.72727 0H0H32V32V23.2727Z" fill="%23F3F6FB"/></svg>');
    }

    .bg-navy .half-media-half-text__media--collage-top::before {
        content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none"><path d="M32 23.2727C32 10.4196 21.5804 0 8.72727 0H0H32V32V23.2727Z" fill="%231C355E"/></svg>');
    }

    .half-media-half-text__media--collage-top::after {
        content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none"><path d="M32 23.2727C32 10.4196 21.5804 0 8.72727 0H0H32V32V23.2727Z" fill="white"/></svg>');
        position: absolute;
        bottom: -37px;
        right: 56px;
    }

    .bg-light-blue .half-media-half-text__media--collage-top::after {
        content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none"><path d="M32 23.2727C32 10.4196 21.5804 0 8.72727 0H0H32V32V23.2727Z" fill="%23F3F6FB"/></svg>');
    }

    .bg-navy .half-media-half-text__media--collage-top::after {
        content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none"><path d="M32 23.2727C32 10.4196 21.5804 0 8.72727 0H0H32V32V23.2727Z" fill="%231C355E"/></svg>');
    }

    .half-media-half-text__media--collage-top--left::before {
        content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none"><path d="M0 23.2727C0 10.4196 10.4196 0 23.2727 0H32H0V32V23.2727Z" fill="white"/></svg>');
    }

    .bg-light-blue .half-media-half-text__media--collage-top--left::before {
        content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none"><path d="M0 23.2727C0 10.4196 10.4196 0 23.2727 0H32H0V32V23.2727Z" fill="%23F3F6FB"/></svg>');
    }

    .bg-navy .half-media-half-text__media--collage-top--left::before {
        content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none"><path d="M0 23.2727C0 10.4196 10.4196 0 23.2727 0H32H0V32V23.2727Z" fill="%231C355E"/></svg>');
    }

    .half-media-half-text__media--collage-top--left::after {
        content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none"><path d="M0 23.2727C0 10.4196 10.4196 0 23.2727 0H32H0V32V23.2727Z" fill="white"/></svg>');
    }

    .bg-light-blue .half-media-half-text__media--collage-top--left::after {
        content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none"><path d="M0 23.2727C0 10.4196 10.4196 0 23.2727 0H32H0V32V23.2727Z" fill="%23F3F6FB"/></svg>');
    }

    .bg-navy .half-media-half-text__media--collage-top--left::after {
        content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none"><path d="M0 23.2727C0 10.4196 10.4196 0 23.2727 0H32H0V32V23.2727Z" fill="%231C355E"/></svg>');
    }

    .half-media-half-text__media .half-media-half-text__media-small-image {
        width: 205px;
        height: 157px;
    }

    .half-media-half-text__media-group--collage {
        padding-top: 175px;
    }

    .half-media-half-text__media--collage-top .half-media-half-text__media-small-image {
        width: 295px;
        height: 348px;
    }

    .half-media-half-text__stats {
        flex-direction: row;
        gap: 64px;
    }

    .half-media-half-text__play-label {
        display: inline;
    }

    .half-media-half-text__play-icon {
        width: 68px;
        height: 68px;
    }

    .half-media-half-text__media-group--video .half-media-half-text__media:hover img,
    .half-media-half-text__media-group--video .half-media-half-text__media:focus-visible img {
        -webkit-transform: scale(1.04);
                transform: scale(1.04);
    }

    .half-media-half-text__media-group--video .half-media-half-text__media:hover .half-media-half-text__play-icon,
    .half-media-half-text__media-group--video .half-media-half-text__media:focus-visible .half-media-half-text__play-icon {
        -webkit-transform: scale(1.08);
                transform: scale(1.08);
    }
}

@media (min-width: 1200px) {
    .half-media-half-text .container {
        max-width: 1368px;
        padding-left: 52px;
        padding-right: 52px;
    }

    .half-media-half-text__variant {
        flex-direction: row;
        justify-content: space-between;
        align-items: stretch;
    }

    .half-media-half-text__variant--reverse {
        flex-direction: row-reverse;
    }

    .half-media-half-text__content-track {
        display: flex;
        flex-direction: column;
        flex: 0 0 503px;
        padding-left: 64px;
    }

    /* Both columns are sticky, so whichever is shorter pins while the taller one scrolls. */
    .half-media-half-text__content {
        position: sticky;
        top: 168px;
    }

    .half-media-half-text__variant--reverse .half-media-half-text__content-track {
        padding-left: 0;
        padding-right: 64px;
    }

    .half-media-half-text__media-group--dual > .half-media-half-text__media:not(.half-media-half-text__media--overlay) {
        max-width: 611px;
        height: auto;
        aspect-ratio: 611 / 698.825;
    }


    .half-media-half-text__media-group {
        margin: 0;
        max-width: none;
        position: sticky;
        top: 168px;
        align-self: flex-start;
    }

    .half-media-half-text__media--mask-tablet {
        display: none;
    }

    .half-media-half-text__media--mask-desktop {
        display: block;
    }

    .half-media-half-text__media-group--simple {
        flex: 0 0 713px;
        max-width: calc(100% - 535px);
    }

    .half-media-half-text__media-group--full {
        flex: 0 0 721px;
        max-width: calc(100% - 535px);
        height: auto;
    }

    .half-media-half-text__media-group--video {
        flex: 0 0 auto;
        max-width: 721px;
        height: 553px;
    }

    .half-media-half-text__media-group--video .half-media-half-text__media,
    .half-media-half-text__media-group--video .half-media-half-text__media img {
        height: 100%;
    }

    .half-media-half-text__media-group--video .half-media-half-text__media {
        aspect-ratio: 721 / 553;
    }

    .half-media-half-text__media-group--collage {
        flex: 0 0 667px;
        max-width: calc(100% - 535px);
        height: 566px;
        padding-top: 0;
    }

    .half-media-half-text__media--collage-main {
        width: 667px;
        height: 447px;
        max-width: 100%;
    }

    .half-media-half-text__media--overlay {
        right: -150px;
        bottom: -80px;
    }

    .half-media-half-text__variant--reverse .half-media-half-text__media--overlay {
        right: auto;
        left: -150px;
    }

    .half-media-half-text__media-group--dual {
        flex: 0 0 611px;
        height: auto;
        max-width: calc(100% - 653px);
        margin-bottom: 64px;
    }

    .half-media-half-text__media .half-media-half-text__media-small-image {
        width: 333px;
        height: 255px;
    }


    .half-media-half-text__media--overlay::before {
        bottom: 80px;
        left: -32px;
        width: 32px;
        height: 32px;
    }

    .half-media-half-text__media--overlay::after {
        top: -32px;
        left: 183px;
        width: 32px;
        height: 32px;
    }

    .half-media-half-text__variant--reverse .half-media-half-text__media--overlay::before {
        left: unset;
        right: -32px;
    }

    .half-media-half-text__variant--reverse .half-media-half-text__media--overlay::after {
        left: 150px;
    }


    .half-media-half-text__media--collage-top {
        right: -56px;
        top: -18px;
    }

    .half-media-half-text__media--collage-top::before {
        top: 18px;
        left: -32px;
        width: 32px;
        height: 32px;
    }

    .half-media-half-text__media--collage-top::after {
        bottom: -32px;
        right: 56px;
        width: 32px;
        height: 32px;
    }

    .half-media-half-text__media--collage-top--left {
        right: auto;
        left: -56px;
    }

    .half-media-half-text__media--collage-top--left::before {
        left: auto;
        right: -32px;
    }

    .half-media-half-text__media--collage-top--left::after {
        left: 56px;
        right: auto;
    }

    .half-media-half-text__stats {
        margin-top: 64px;
    }
}

@media (max-width: 767px) {
    .half-media-half-text:not(.bg-white) {
        padding-top: 24px;
    }
}