article.card {
    display: flex;
    width: 100%;
    height: 100%;
    gap: 0;
    padding: 0;
    border: var(--wp--custom--main-border);
    border-radius: var(--wp--preset--font-size--2-dvw);
    overflow: hidden;
    transition: var(--wp--custom--main-trans);
    background-color: var(--wp--preset--color--mid);

    div{
        padding: var(--wp--preset--font-size--2-dvw);
        align-self: center;

        span{
            color: var(--wp--preset--color--ci-green);
            font-size: 1rem;
            font-weight: 700;
        }

        h3{
            margin: .25rem 0 .5rem 0;
            font-weight: 600;
            font-size: clamp(1.5rem, var(--wp--preset--font-size--2-dvw), 2rem);
            color: var(--wp--preset--color--accent);
        }

        p{
            margin-bottom: 0;
        }

        .more{
            display: block;
            border-top: var(--wp--custom--main-border);
            border-color: currentColor;
            padding-top: .5rem;
            display: flex;
            align-items: center;
            gap: 1rem;
        }
    }

    figure {
        margin: 0;
        overflow: hidden;

        img {
            width: 100%;
            height: auto;
            display: block;
            object-fit: cover;
            transition: var(--wp--custom--main-trans);
        }
    }

    &.oben{
        flex-direction: column;

        figure {
            width: 100%;

            img{
                aspect-ratio: 16 / 9;
            }
            
        }
    }

    &.links {
        flex-direction: row;
        align-items: stretch;

         figure {
            flex: 0 0 35%;

            img{
                height: 100%;
            }
        }
    }

    &.rechts {
        flex-direction: row-reverse;
        align-items: stretch;

        figure {
            flex: 0 0 50%;

            img{
                height: 100%;
            }
        }
    }

     &:hover{
        border-color: var(--wp--preset--color--ci-yellow);
        box-shadow: var(--wp--custom--box-shadow);
        transform: translateY(-.25rem);

        img{
            transform: scale(1.05);
        }
    }

}

@media (max-width: 768px) {
  article.card{
        &.links,
        &.rechts {
            flex-direction: column;
        }

        figure {
            width: 100%;

            img{
                aspect-ratio: 16 / 9;
            }
        }
    }
}