.leistungen-list {
    border-block-start: var(--border-line) var(--color-accent);
}

.leistungen-list li {
    border-block-end: var(--border-line) var(--color-accent);
    inline-size: 100%;
    max-inline-size: revert;
}

.leistungen-list .leistung-wrap {
    display: flex;
    position: relative;
    flex-direction: column;
    transition: color calc(var(--transition-duration) / 2)
        var(--transition-easing);
    inline-size: 100%;
    text-decoration: none;
}

@media (min-width: 744px) {
    .leistungen-list .leistung-wrap {
        flex-direction: row;
    }

    .leistungen-list li:nth-child(2n) .leistung-wrap {
        flex-direction: row-reverse;
    }
}

.leistungen-list .leistung-wrap .media {
    aspect-ratio: 2/1;
    inline-size: 100%;
}

.leistungen-list .leistung-wrap .media img {
    aspect-ratio: 2/1;
    block-size: 100%;
    object-fit: cover;
}

.leistungen-list .leistung-wrap .content {
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    padding: calc(var(--gutter) / 2);
    inline-size: 100%;
    text-align: start;
}

@media (min-width: 744px) {
    .leistungen-list .leistung-wrap .media {
        aspect-ratio: 1/1;
        inline-size: calc(50% - var(--gutter) / 2);
    }

    .leistungen-list .leistung-wrap .content {
        padding: var(--gutter);
        inline-size: calc(50% + var(--gutter) / 2);
    }
}

.leistungen-list .leistung-wrap .content::before {
    position: absolute;
    /*transform: scale(0);*/
    transform-origin: top left;
    opacity: 0;
    z-index: -1;
    transition:
        opacity var(--transition),
        transform var(--transition);
    inset: 0%;
    background: linear-gradient(
        180deg,
        color-mix(
                in srgb,
                var(--color-ocher),
                transparent var(--bg-transparency)
            )
            0%,
        color-mix(
                in srgb,
                var(--color-gold),
                transparent var(--bg-transparency)
            )
            100%
    );
    inline-size: 100%;
    block-size: 100%;
    content: "";
}

.leistungen-list .leistung-wrap:where(:focus-visible, :hover) .content::before {
    transform: scale(1);
    opacity: 1;
}

.leistungen-list .leistung-wrap:where(:focus-visible, :hover) {
    --color-canvastext: var(--color-white);
    --color-canvas: var(--color-gold);
    --color-accent: var(--color-white);
    color: var(--color-canvastext);
}

.leistungen-list .leistung-wrap .content .leistung-header {
    font-size: var(--font-size-md);
    font-family: var(--font-alt);
}

.leistungen-list .leistung-wrap .content .icon-fa {
    transition: color var(--transition);
    color: var(--color-accent);
    font-size: 3em;
}