.modulcard {

    --special-color: var(--wp--preset--color--ci-green);
    --special-colorlight: oklch(from var(--special-color) 0.97 calc(c * 0.15) h);

    display: flex;
    width: 100%;
    height: 100%;
    gap: 1.5rem;
    padding: 0;
    border-radius: var(--wp--preset--font-size--2-dvw);
    overflow: hidden;
    transition: var(--wp--custom--main-trans);
    background-color: var(--special-colorlight);
    flex-direction: column;
    justify-content: space-between;

    div{
        padding: 2rem;
        align-self: flex-start;
        width: 100%;
         box-sizing: border-box;

        span{
            color: var(--special-color);
            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;
             color: var(--wp--preset--color--accent);
        }

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

            svg{
                transition: var(--wp--custom--main-trans);
            }
        }
    }

    figure {
        margin: 0;
        overflow: hidden;

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

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

        img{
            transform: scale(1.05);
        }

        .more{
           svg{
            animation: bounce .8s ease-in-out infinite;
           }

           color: var(--wp--preset--color--accent);
        }
    }

}

.modulcard:has(figure) div {
    padding-bottom: 0;
}

@keyframes bounce{
    0%{
        margin-left: 0;
    }

    50%{
        margin-left: 1rem;
    }
}