.koi-quote {
    --container-gutter-vertical: var(--sds-size-space-2400);
    --content-gap: var(--sds-size-space-800);

    --quote-font-size: 2.25rem;
    --quotee-font-size: 1.5rem;

    --open-quote-offset-x: var(--open-quote-width);
    --open-quote-offset-y: calc(calc(0.25rem + var(--open-quote-height)) * -1);

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

        --content-gap: var(--sds-size-space-1200);
        --open-quote-offset-x: calc(calc(var(--open-quote-width) / 2) * -1);
        --open-quote-offset-y: calc(calc(1.2rem + var(--open-quote-height)) * -1);

        --quote-font-size: 3rem;
        --quotee-font-size: 2rem;
    }

    color: var(--foreground-color);
}

.koi-quote-content {
    display: flex;

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

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

.koi-quote-quote {
    margin: 0;
    padding: 0;

    >* {
        color: currentColor;
        text-align: center;
        font-family: var(--fonts-proxima-nova);

        font-size: var(--quote-font-size);
        font-style: normal;
        font-weight: 500;
        line-height: 100%;
        text-transform: uppercase;

        text-wrap: balance;

        &:first-child,
        &:last-child {
            position: relative;
        }

        &:first-child::before {
            content: '';
            display: block;
            background-color: currentColor;
            mask-size: cover;
            mask-repeat: no-repeat;
            mask-position: center;
            mask-image: var(--open-quote-image);

            aspect-ratio: var(--open-quote-aspect-ratio);
            width: var(--open-quote-width);

            position: absolute;

            left: var(--open-quote-offset-x);
            top: var(--open-quote-offset-y);
        }

        &:last-child::after {
            content: '”';
            color: currentColor;
            position: absolute;
            inset: auto;
        }
    }
}

.koi-quote-quotee {
    color: currentColor;
    text-align: center;
    font-family: var(--fonts-proxima-nova);
    font-size: var(--quotee-font-size);
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    text-transform: uppercase;
}