.koi-dual-pane-callout {
    --container-gutter-vertical: var(--sds-size-space-600);
    --content-grid-columns: 1fr;
    --content-grid-content-pane-order: 2;
    --content-grid-photo-pane-order: 1;

    --heading-font-size: 2rem;

    --items-gap: var(--sds-size-space-600);
    --item-content-gap: var(--sds-size-space-200);
    --item-content-font-size: 0.875rem;
    --photo-pane-translate-y: 0;
    --photo-pane-width: auto;

    --content-grid-gap: 1rem;

    --photo-image-width: 100%;
    --ar-content-desktop-display: none;
    --ar-content-mobile-display: block;

    --images-ar-icon-width: 70px;
    --images-ar-icon-height: 33px;
    --images-ar-icon-aspect-ratio: 70 / 33;

    @media (width >=64rem) {
        --container-gutter-vertical: var(--sds-size-space-800);

        --content-grid-columns: 1fr auto;
        --content-grid-content-pane-order: 1;
        --content-grid-photo-pane-order: 2;
        --content-grid-gap: var(--sds-size-space-2400);

        --heading-font-size: 2.75rem;

        --items-gap: var(--sds-size-space-800);
        --item-content-gap: var(--sds-size-space-300);
        --item-content-font-size: 1.25rem;

        --photo-pane-width: fit-content;
        --photo-image-width: unset;

        --ar-content-desktop-display: flex;
        --ar-content-mobile-display: none;

        &[data-image-on-left="True"] {
            --content-grid-columns: auto 1fr;
            --content-grid-photo-pane-order: 1;
            --content-grid-content-pane-order: 2;
        }

        &[data-offset-image="True"] {
            --photo-pane-translate-y: var(--sds-size-space-1600);
        }
    }
}

.koi-dual-pane-callout-content {
    display: grid;
    grid-template-columns: var(--content-grid-columns);
    gap: var(--content-grid-gap);
}

.koi-dual-pane-callout-content-pane {
    order: var(--content-grid-content-pane-order);
}

.koi-dual-pane-callout-photo-pane {
    order: var(--content-grid-photo-pane-order);
    translate: 0 calc(var(--photo-pane-translate-y) * -1);
    width: var(--photo-pane-width);
    display: flex;
    flex-direction: column;
}

.koi-dual-pane-callout-heading {
    margin-block: 0 var(--sds-size-space-1200);

    color: var(--colors-brand);
    font-family: var(--fonts-maiah);
    font-size: var(--heading-font-size);
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
    text-transform: uppercase;
    text-wrap: balance;
}

.koi-dual-pane-callout-items {
    display: flex;
    flex-direction: column;
    gap: var(--items-gap);

    margin: 0;
    padding: 0;
}

.koi-dual-pane-callout-item {
    display: flex;
    flex-direction: column;
    color: var(--colors-brand);

    gap: var(--item-content-gap);

    >* {
        margin: 0;
        padding: 0;
    }
}

.koi-dual-pane-callout-item-heading {
    color: currentColor;
    font-family: var(--fonts-proxima-nova);
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.koi-dual-pane-callout-item-content {
    >* {
        color: currentColor;
        font-family: var(--fonts-proxima-nova);
        font-size: var(--item-content-font-size);
        font-style: normal;
        font-weight: 400;
        line-height: 150%;
    }
}

.koi-dual-pane-callout-picture,
.koi-dual-pane-callout-image {
    width: var(--photo-image-width);
}

.koi-dual-pane-callout-ar {
    padding: var(--sds-size-space-400);
    display: var(--ar-content-desktop-display);
    flex-direction: column;
    align-items: center;
    background-color: var(--colors-white);
}

.koi-dual-pane-callout-ar-heading {
    margin-block: 0 var(--sds-size-space-300);

    color: currentColor;
    text-align: center;
    font-family: var(--fonts-proxima-nova);
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
    letter-spacing: 3px;
    text-transform: uppercase;

    display: flex;
    flex-direction: column;
    align-items: center;

    &::before {
        content: '';

        mask-image: var(--images-ar-icon);
        mask-size: cover;
        aspect-ratio: var(--images-ar-icon-aspect-ratio);
        width: var(--images-ar-icon-width);
        background-color: currentColor;

        display: block;
        margin-block: 0 var(--sds-size-space-600);
    }
}

.koi-dual-pane-callout-ar-content {
    >* {
        color: currentColor;
        text-align: center;
        font-family: var(--fonts-proxima-nova);
        font-size: 1.25rem;
        font-style: normal;
        font-weight: 400;
        line-height: 100%;
    }
}