.at-quote .g-container__inner {
    height: 100%;
}

.at-quote__inner:not(.--3col) {
    height: 100%;
    max-width: 80ch;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.at-quote__contentWrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--marginSmall);
}

.at-quote__imageWrapper {
    order: -1;
    align-self: center;
}

.at-quote__image {
    max-width: 75%;
    margin-inline: auto;
    border-radius: var(--borderRadiusSmall);
}

.at-quote__image.--small {
    max-width: 50%;
}

.at-quote__image.--large {
    max-width: 100%;
}

@container (min-width: calc((256px * 3) + (2rem * 2))) {
    .at-quote__inner .at-quote__contentWrapper {
        grid-column: 2 / -1;
    }
}

/**
 * Layout options
 */

@container (min-width: calc(256px * 2 + 2rem)) {
    .--text-left .at-quote__imageWrapper {
        order: unset;
    }
}

@container (min-width: calc((256px * 3) + (2rem * 2))) {
    .--text-left .at-quote__imageWrapper {
        grid-row: 1;
        grid-column: 3 / -1;
    }

    .--text-left .at-quote__contentWrapper {
        grid-column: 1 / 3;
    }
}

/** Reset blockquote styling */
.at-quote blockquote {
    margin: 0;
    padding: 0;
    border: none;
    font-style: normal;
}

.at-quote__quote {
    --quoteSize: var(--h3Size);
    margin-block-end: var(--marginSmall);
    font-family: var(--quoteFont);
    font-size: var(--quoteSize);
    font-weight: var(--headingsWeight);
    direction: ltr;
}

.at-quote__quote.--small {
    --quoteSize: var(--h4Size);
}

.at-quote__quote.--large {
    --quoteSize: calc(var(--h3Size) * 1.5);
    line-height: 1.2;
}

.at-quote__quote.--extraLarge {
    --quoteSize: var(--h2Size);
    line-height: 1.2;
}

.at-quote__quote::before,
.at-quote__quote::after {
    font-size: var(--quoteSize);
    line-height: 1;
}

.at-quote__quote::before {
    content: "“";
}

.at-quote__quote::after {
    content: "”";
}

.at-quote .u-centerText .u-buttonWrapper {
    place-content: center;
}

/**
 * at-quote inside the at-carousel
 */

.at-carousel.--hasBackground .at-quote {
    margin: 0;
    padding: 0;
}

.at-carousel .at-quote__inner:not(.--3col) {
    margin-inline: auto;
}