.blockquote {
    padding: 60px 80px 40px;
    /*position: relative;*/
}

.blockquote p {
    font-family: "Open_Sans";
    font-size: 1.3rem;
    text-align: center;
    line-height: 2.1rem;
    color: var(--font-color);
}

.blockquote span {
    display: block;
    color: var(--heading-color);
    font-style: normal;
    font-weight: bold;
    margin-top: 1rem;
    margin-bottom: 1rem;
    text-align: center;
}

.blockquote:before {
    position: absolute;
    font-family: 'FontAwesome';
    top: 0;
    left: 0;
    content: "\f10d";
    font-size: 5rem;
    color: var(--colour-gold);
}

.blockquote::after {
    content: "";
    top: 20px;
    left: 50%;
    height: 3px;
    width: 200px;
    margin-left: -100px;
    position: absolute;
    border-bottom-style: solid;
    border-bottom-width: 2px;
    border-bottom-color: var(--colour-gold);
}

.otro-blockquote {
    font-size: 1.4em;
    width: 60%;
    margin: 50px auto;
    font-family: Open Sans;
    font-style: italic;
    color: #555555;
    padding: 1.2em 30px 1.2em 75px;
    border-left: 8px solid #78C0A8;
    line-height: 1.6;
    position: relative;
    background: #EDEDED;
}

.otro-blockquote::before {
    font-family: Arial;
    content: "\201C";
    color: #78C0A8;
    font-size: 4em;
    position: absolute;
    left: 10px;
    top: -10px;
}

.otro-blockquote::after {
    content: '';
}


/*///////////// FOUNDATION MEDIUM /////////////////*/
@media screen and (max-width: 840px) {
    .blockquote p {
        font-size: 1.2rem;
        line-height: 1.8rem;
    }

    .blockquote:before {
        font-size: 4rem;
    }
}

@media screen and (max-width: 640px) {
    .blockquote {
        padding: 60px 10px 0px;
    }

    .blockquote p {
        font-size: 1rem;
        line-height: 1.6rem;
    }

    .blockquote:before {
        font-size: 3rem;
    }
}

/*blockquote {
    max-width: 25rem;
    margin-inline: auto
}

blockquote.q-card-color-1 {
    --accent-color: rgb(32 32 54);
    --bg-color: rgb(30 145 254);
    --dot-color: rgb(255 255 255 / .35);
    --text-color: rgb(243 243 243);
    --text-color-author: rgb(243 243 243);
}

blockquote.q-card-color-2 {
    --accent-color: rgb(243 243 243);
    --bg-color: rgb(33 29 30);
    --dot-color: rgb(255 255 255 / .125);
    --text-color: rgb(243 243 243);
    --text-color-author: rgb(33 29 30);
}

blockquote.q-card-color-3 {
    --accent-color: rgb(30 145 254);
    --bg-color: rgb(32 32 54);
    --dot-color: rgb(255 255 255 / .125);
    --text-color: rgb(243 243 243);
    --text-color-author: rgb(243 243 243);
}

blockquote.q-card {
    --padding: 1rem;
    padding: var(--padding);
    color: var(--text-color, black);
    font-weight: 600;
    background-color: var(--bg-color, white);
    display: grid;
    gap: 1rem;
    background-image: radial-gradient( circle, var(--dot-color, rgb(0 0 0 / .125)) calc(25% - 1px), transparent 25% );
    background-size: 0.5rem 0.5rem;
    border-radius: 0.25rem;
    box-shadow: 0.5rem 0.5rem 2rem rgb(0 0 0 / .5)
}

blockquote.q-card::before {
    --qHeight: 4rem;
    content: "";
    margin-left: calc(var(--padding) * -1);
    margin-top: calc(var(--padding) * -1);
    height: var(--qHeight);
    width: calc(var(--qHeight) * 1.1);
    background-image: radial-gradient( circle at bottom right, transparent calc(var(--qHeight) / 4 - 1px), var(--accent-color, black) calc(var(--qHeight) / 4) calc(var(--qHeight) / 2), transparent calc(var(--qHeight) / 2 + 1px) ), linear-gradient(var(--accent-color, black), var(--accent-color, black));
    background-size: calc(var(--qHeight) / 2) calc(var(--qHeight) / 2);
    background-position: top left, bottom left;
    background-repeat: space no-repeat
}

blockquote.q-card > .author {
    color: var(--text-color-author, white);
    background-color: var(--accent-color, black);
    justify-self: end;
    font-size: 0.75em;
    padding: 0.5em 1em;
    border-radius: 0.25rem;
}

blockquote.q-card > .author::before {
    content: "- "
}
*/