/*     ###### #####  ##     ##   ## ##   ## ##   ##  ######    */
/*    ###    ##   ## ##     ##   ## ### ### ###  ## ##         */
/*    ##     ##   ## ##     ##   ## ## # ## ## # ##  #####     */
/*    ###    ##   ## ##     ##   ## ##   ## ##  ###      ##    */
/*     ###### #####  ####### #####  ##   ## ##   ## ######     */


.wp-block-columns {
    margin: var(--margin-top) 0 var(--margin-bottom);
    gap: 20px;
}

    .wp-block-column {
        position: relative;

        @media (max-width: 781px) {
            &:empty { display: none; }
        }
    }

    .wp-block-columns .wp-block-column > :first-child { margin-top: 0; }
    .wp-block-columns .wp-block-column > :last-child { margin-bottom: 0; }

    /* fill column with image to match text height of other column */
    /* selectors can change depending if image is edited in WP */
    /* add class 'scale-img' to column block to prevent image from filling column */
    .wp-block-column:not(.scale-img) > .wp-block-image,
    .wp-block-column:not(.scale-img) > .wp-block-image figure {
        display: unset !important;
        inset: 0;
        position: absolute;
    }

        .wp-block-column:not(.scale-img) > .wp-block-image img {
            min-height: 100%;
            min-width: 100%;
            object-fit: cover;
        }

    @media (max-width: 781px) {
        .wp-block-column:not(.scale-img) > .wp-block-image,
        .wp-block-column:not(.scale-img) > .wp-block-image figure { position: unset; }
        .wp-block-column:not(.scale-img) > .wp-block-image img {
            height: unset;
            margin: 0 auto;
            min-height: auto;
            min-width: auto;
            width: 350px;
        }
    }

    /* add to Image block */
    /* https://tailwindcss.com/docs/object-position */
    .object-bottom img { object-position: bottom; }
    .object-center img { object-position: center; }
    .object-left img { object-position: left; }
    .object-left-bottom img { object-position: left bottom; }
    .object-left-top img { object-position: left top; }
    .object-right img { object-position: right; }
    .object-right-bottom img { object-position: right bottom; }
    .object-right-top img {	object-position: right top; }
    .object-top img { object-position: top; }

    .object-25-0 img { object-position: 25% 0; }
    .object-60-0 img { object-position: 60% 0; }
    .object-75-0 img { object-position: 75% 0; }

    .object-0-25 img { object-position: 0 25%; }
    .object-0-60 img { object-position: 0 60%; }
    .object-0-75 img { object-position: 0 75%; }

    .object-25-50 img { object-position: 25% 50%; }

    .object-50-25 img { object-position: 50% 25%; }

    .object-75-50 img { object-position: 75% 50%; }

    .object-50-75 img { object-position: 50% 75%; }


/*     ###### ##   ##  #####   ###### #######    */
/*       ##   ### ### ##   ## ##      ##         */
/*       ##   ## # ## ####### ##  ### ######     */
/*       ##   ##   ## ##   ## ##   ## ##         */
/*     ###### ##   ## ##   ##  #####  #######    */


/* add class 'full-width' to Image block > Advanced > Additional CSS Class(es) */
.wp-block-image.full-width img {
    aspect-ratio: 2.5 / 1;
    object-fit: cover;
    width: 100%;
}

.wp-element-caption {
    font-size: 1.2rem;
}

/* Image > Styles > Rounded */
.wp-block-image .is-style-rounded img,
.wp-block-image.is-style-circle-mask img,
.wp-block-image.is-style-rounded img { border-radius: 20px; }




/*    ######  ##   ## ##      ##      #####  ##   ##  ##### ####### #######    */
/*    ##   ## ##   ## ##      ##     ##   ## ##   ## ##   ##   ##   ##         */
/*    ######  ##   ## ##      ##     ##    # ##   ## ##   ##   ##   ######     */
/*    ##      ##   ## ##      ##     ##  ##  ##   ## ##   ##   ##   ##         */
/*    ##       #####  ####### ####### ### ##  #####   #####    ##   #######    */


.wp-block-pullquote {
    margin: var(--margin-bottom) 0;
    padding: 0;
}

    blockquote {
        border-top: 1px solid var(--color02);
        font-size: 3.2rem;
        line-height: 1.25;
        padding: 30px 0;
        text-align: left;
    }

        blockquote p::before { content: '\201C'; }
        blockquote p::after { content: '\201D'; }


    blockquote cite {
        border-top: 1px solid var(--color02);
        display: block;
        font-size: 1.6rem;
        font-weight: 200;
        padding-top: 15px;
        white-space: nowrap;
    }

    blockquote cite::first-line { font-weight: 600; }




/*     ###### ####### ######   #####  ######   ##### ####### #####  ######     */
/*    ##      ##      ##   ## ##   ## ##   ## ##   ##   ##  ##   ## ##   ##    */
/*     #####  ######  ######  ####### ######  #######   ##  ##   ## ######     */
/*         ## ##      ##      ##   ## ##  ##  ##   ##   ##  ##   ## ##  ##     */
/*    ######  ####### ##      ##   ## ##   ## ##   ##   ##   #####  ##   ##    */


hr, hr.wp-block-separator {
    background-color: var(--color02);
    border: 0;
    height: 1px;
    margin: var(--margin-bottom) 0;
}