/* Figure stays as Gutenberg wants */
.wp-block-image.has-additional-image {
    overflow: visible;
}

/* Image-sized anchor */
.wp-block-image.has-additional-image .image-overlay-anchor {
    position: relative;
    display: inline-block;
    max-width: 100%;
}

/* Ensure image defines anchor size */
.wp-block-image.has-additional-image .image-overlay-anchor img {
    display: block;
    max-width: 100%;
    height: auto;
    width: 100%;
}

/* Overlay */
.wp-block-image.has-additional-image .image-overlay-anchor::after {
    content: "";
    position: absolute;

    width: clamp(6rem, 4.625rem + 6.1111vw, 10.125rem);
    height: clamp(6rem, 4.625rem + 6.1111vw, 10.125rem);

    background-image: url('../images/texan_wm.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    border-radius: 50%;
    pointer-events: none;
    z-index: 2;
}

/* Positions — center touches corner */
.wp-block-image.has-additional-image.position-bottom-right
.image-overlay-anchor::after {
    bottom: 0;
    right: 0;
    transform: translate(20%, 20%);
    @media screen and (max-width: 991px) {
        transform: translate(10%, 20%);
    }
}

.wp-block-image.has-additional-image.position-bottom-left
.image-overlay-anchor::after {
    bottom: 0;
    left: 0;
    transform: translate(-20%, 20%);
    @media screen and (max-width: 991px) {
        transform: translate(-10%, 20%);
    }
}

.wp-block-image.has-additional-image.position-top-right
.image-overlay-anchor::after {
    top: 0;
    right: 0;
    transform: translate(20%, -20%);
    @media screen and (max-width: 991px) {
        transform: translate(10%, -20%);
    }
}

.wp-block-image.has-additional-image.position-top-left
.image-overlay-anchor::after {
    top: 0;
    left: 0;
    transform: translate(-20%, -20%);
    @media screen and (max-width: 991px) {
        transform: translate(-10%, -20%);
    }
}

.wp-block-image {
    &.has-box-shadow {
        position: relative;

        &::before {
            content: "";
            position: absolute;
            width: 90%;
            height: 90%;
            background-color: #D1E5FF;
            border-radius: 10px;
            z-index: 0;
            transition: all 0.2s ease-in-out;
        }

        img {
            position: relative;
            z-index: 1;
            width: calc(100% - 30px);
            @media screen and (max-width: 991px) {
                width: calc(100% - 10px);
            }
        }

        /* Shadow positions */
        &.shadow-position-bottom-left{
            margin-left: 30px;
            &::before {
                bottom: -30px;
                left: -30px;
            }
            @media screen and (max-width: 991px) {
                margin-left: 10px;
                &::before {
                    bottom: -25px;
                    left: -25px;
                }
            }
        }

        &.shadow-position-bottom-right{
            margin-right: 30px;
            &::before {
                bottom: -30px;
                right: 0;
            }
            @media screen and (max-width: 991px) {
                margin-right: 10px;
                &::before {
                    bottom: -25px;
                    right: -15px;
                }
            }
        }

        &.shadow-position-top-left{
            margin-left: 30px;
            &::before {
                top: -30px;
                left: -30px;
            }
            @media screen and (max-width: 991px) {
                margin-left: 10px;
                &::before {
                    top: -15px;
                    left: -15px;
                }
            }
        }

        &.shadow-position-top-right{
            margin-right: 30px;
            &::before {
                top: -30px;
                right: 0;
            }
            @media screen and (max-width: 991px) {
                margin-right: 10px;
                &::before {
                    top: -15px;
                    right: -15px;
                }
            }
        }
    }
    &.is-full-height-image {
        height: 100%;
        .image-full-height {
            display: block;
            height: 100%;
            img {
                height: 100%;
                width: 100%;
            }
        }
        &.object-fit-cover {
            img {
                object-fit: cover;
            }
        }
        &.object-fit-contain {
            img {
                object-fit: contain;
            }
        }
        &.object-fit-fill {
            img {
                object-fit: fill;
            }
        }
        &.object-fit-none {
            img {
                object-fit: none;
            }
        }
        &.object-fit-scale-down {
            img {
                object-fit: scale-down;
            }
        }
        &.object-position-center {
            img {
                object-position: center;
            }
        }
        &.object-position-top {
            img {
                object-position: top;
            }
        }
        &.object-position-bottom {
            img {
                object-position: bottom;
            }
        }
        &.object-position-left {
            img {
                object-position: left;
            }
        }
        &.object-position-right {
            img {
                object-position: right;
            }
        }
        &.object-position-top-left {
            img {
                object-position: top left;
            }
        }
        &.object-position-top-right {
            img {
                object-position: top right;
            }
        }
        &.object-position-bottom-left {
            img {
                object-position: bottom left;
            }
        }
        &.object-position-bottom-right {
            img {
                object-position: bottom right;
            }
        }
    }
}

@media screen and (min-width: 782px) {
    .wp-block-columns {
        .wp-block-column:has(.wp-block-image) {
            .wp-block-image {
                max-height: fit-content;
            }
        }
    }
}
@media screen and (min-width: 540px) and (max-width: 781px) {
    .wp-block-columns {
        .wp-block-column:has(.wp-block-image) {
            .wp-block-image {
                img {
                    max-height: 40vh;
                    object-fit: cover;
                    object-position: center;
                }
            }
        }
    }
}