.wp-block-post-template {
    .wp-block-group {
        contain: paint;
    }

    &.is-style-default {
        > .wp-block-post {
            .wp-block-post-excerpt {
                flex-grow: 3;
            }
        }
    }

    &.is-style-cover {
        border-radius: 8px;
        position: relative;
        aspect-ratio: 1;
        padding: var(--wp--preset--spacing--small);
        contain: paint;
        color: var(--wp--preset--color--white);
        display: grid;
        gap: 1em;
        grid-auto-rows: min-content;
        align-content: end;
        align-items: end;

        .wp-block-post-featured-image {
            position: absolute;
            inset: 0;
            z-index: -1;

            img {
                height: 100%;
            }

            &:after {
                background: linear-gradient(
                    180deg,
                    rgba(0, 36, 56, 0) 0%,
                    var(--wp--preset--color--primary-navy-900) 77.42%
                );
                content: "";
                position: absolute;
                inset: 0;
            }
        }

        > * {
            margin-block: 0;
        }
    }

    &.is-style-playlist {
        > .wp-block-post {
            background-color: var(--wp--preset--color--primary-navy-200);
            border-radius: 8px;
            contain: paint;

            > * {
                > *:is(p) {
                    background-color: var(--wp--preset--color--primary-dark-green-900);
                    color: var(--wp--preset--color--white);
                    font-weight: 700;
                    padding: 0.6em;
                }
            }
        }

        a {
            text-decoration: none;
        }

        .taxonomy-category {
            > * {
                background-color: var(--wp--preset--color--primary-dark-green-900);
                color: var(--wp--preset--color--white);
                border-radius: 4px;
                font-weight: 700;
                padding: 0.6em;
            }
        }
    }

    &.is-style-testimonials {
        .wp-block-group {
            contain: none;
        }

        > * {
            position: relative;
        }

        li > * {
            height: 100%;
        }

        .image {
            position: absolute;
            width: 100%;
            z-index: 1;
            > figure {
                background-color: var(--wp--preset--color--white);
                border-radius: 50%;
                overflow: hidden;
                padding: 0.4em;
                width: 200px;
                display: flex;
                align-items: center;
                justify-content: center;
                aspect-ratio: 1;
                border: solid 1px var(--wp--preset--color--primary-navy-400);

                img {
                    aspect-ratio: 1;
                    width: 80% !important;
                    height: auto !important;
                }
            }
        }

        .content {
            padding-top: 145px !important;
            margin-top: 100px !important;
            position: relative;

            &::before,
            &::after {
                font-family: "classvr_v3_icons";
                line-height: normal;
                position: absolute;
                content: "\e005";
                font-size: 3em;
                display: block;
                opacity: 0.4;
            }

            &::before {
                margin-left: var(--wp--preset--spacing--x-small);
                top: 100px;
                left: 0;
            }

            &::after {
                margin-right: var(--wp--preset--spacing--x-small);
                transform: scale(-1, -1);
                top: 100px;
                right: 0;
            }
        }

        @media (601px <= width <= 768px) {
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            & > :last-child {
                grid-column: span 2;
            }
        }

        @media (width <= 600px) {
            grid-template-columns: unset;
        }

        @media (width <= 320px) {
            .image {
                > figure {
                    img {
                        width: 150px !important;
                        height: 150px !important;
                    }
                }
            }

            .content {
                padding-top: 100px !important;
                margin-top: 75px !important;
                position: relative;

                &::before,
                &::after {
                    top: 55px;
                }
            }
        }
    }

    &.is-style-orange-outline {
        border: solid 1px var(--wp--preset--color--primary-orange-900);
        position: relative;
        border-radius: 8px;

        .taxonomy-category {
            position: absolute;
            top: var(--wp--preset--spacing--x-small);
            left: var(--wp--preset--spacing--x-small);
        }
    }
}