.teaser-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1em;

    .teaser-card-wrapper {
        position: relative;
        aspect-ratio: 3 / 2;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-wrap: balance;
        text-align: center;
        border-radius: 4px;

        .content {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: -1;

            background-color: rgba(0, 0, 0, 0.3);
            background-image: var(--background-image);
            background-position: center;
            background-size: cover;
            background-blend-mode: darken;
            transition: all .2s ease-in-out;
        }

        h4 {
            color: white;
        }

        p {
            color: white;
            font-size: .8em;
        }

        &:hover, &:focus {
            .content {
                transform: scale(1.1);
            }
        }
    }
}