section.block.block-blockquote {
    --_after-height: 0px;
    margin-block: -1px;
    padding-block: 5.625rem;
    position: relative;
}

section.block.block-blockquote.animated::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: var(--_after-height);
    background-color: var(--c-beige-00);
}

section.block.block-blockquote .content {
    max-inline-size: 57.125rem;
    inline-size: 100%;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2.5rem;
}

section.block.block-blockquote .content .img-wrapper {
    overflow: hidden;
    block-size: auto;
    aspect-ratio: 330/433;
    flex-basis: 20.625rem;
    z-index: 1;
}

section.block.block-blockquote .content blockquote {
    color: var(--accent);
    position: relative;
    isolation: isolate;
    flex-basis: 31.25rem;
}

section.block.block-blockquote .content blockquote::before {
    content: "“";
    color: var(--accent);
    opacity: 0.2;
    z-index: -1;
    font-size: 12.5rem;
    line-height: 0.5;
    position: absolute;
    inset-block-start: 0.3125rem;
    inset-inline-start: -2.5625rem;
}

section.block.block-blockquote.without-img .content blockquote {
    flex-basis: auto;
    flex-grow: 1;
}

@media only screen and (max-width: 768px) {
    section.block.block-blockquote {
        padding-block: 3.125rem;
    }

   section.block.block-blockquote .content {
        display: grid;
    } 
    
    section.block.block-blockquote .content blockquote {
        padding-inline: 1.25rem;
    }

    section.block.block-blockquote .content blockquote::before {
        inset-inline-start: -0.5625rem;
    }

}
