@layer components {
    .staldia-service-card {
        border-radius: 5px;
        z-index: 1;
    }
    .staldia-service-card-header {
        --padding-y: 30px;
        height: 100%;
        padding: var(--padding-y) var(--layout-padding-horizontal-base);
        background: var(--color-bg-white);
    }
    .staldia-service-card-title:before {
        content: attr(data-service-number);
        font-size: 11px;
        background: rgb(var(--color-text-rgb) / .5);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        line-height: 1.2;
    }
    .staldia-service-card-link:before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 9;
    }
    .staldia-service-card-figure {
        aspect-ratio: 3 / 2;
        height: 100%;
        order: -1;
    }
    .staldia-service-card-img {
        position: absolute;
        top: 0;
        left: 0;
        transition: transform .5s;
    }
    .staldia-service-card:hover .staldia-service-card-img { transform: scale(1.1); } 
    @media (min-width: 1000px) {
        .staldia-service-card-container {
            grid-template-columns: 1fr 1fr;
        }
        .staldia-service-card-header {
            place-content: center;
            --padding-y: 100px;
        }
        .staldia-service-card-figure { aspect-ratio: unset; }
    }
}