.template-featured-blog-posts {
    & .post {
        text-decoration: none;
        color: inherit;
        backdrop-filter: opacity(100%); /* necessary for obscure layout reasons */

        & li {
            isolation: isolate;
        }

        & img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            position: absolute;
            border-radius: 1.1rem;
        }

        & .title {
            background: linear-gradient(
                to bottom,
                color-mix(in srgb, transparent 90%, var(--tile-background-color)),
                color-mix(in srgb, transparent, var(--tile-background-color) 85%)
            );

            & > h3 {
                padding-top: 0.5rem;
                padding-bottom: 0.5rem;

                & > span {
                    margin-left: -0.5rem;
                    padding: 0.5rem;
                    box-decoration-break: clone;
                    background: rgb(from var(--background-color) r g b / 90%);
                    backdrop-filter: brightness(80%) saturate(300%);
                }
            }
        }

        & .description {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: end;

            background: linear-gradient(
                to bottom,
                color-mix(in srgb, transparent, var(--tile-background-color) 85%),
                var(--tile-background-color)
            );

            & > .text {
                width: 100%;
            }

            & > .button-push {
                margin-top: 1rem;
            }
        }
    }

    & .placeholder {
        & > li {
            background: linear-gradient(
                to bottom,
                color-mix(in srgb, transparent, var(--tile-background-color) 50%),
                var(--tile-background-color)
            );
        }
    }

    @media (max-width: 1366px) {
        & .placeholder {
            display: none;
        }
    }
}