@layer components {
    .staldia-materials-card {
        --padding-size: 30px;
        padding: var(--padding-size) 0;
        --border: 1px solid rgb(var(--color-text-rgb) / .1);
        border-bottom: var(--border);
        z-index: 1;
    }
    .staldia-materials-card-container { gap: var(--padding-size) 3rem; }
    .staldia-materials-card:first-child { border-top: var(--border); }
    .staldia-materials-card-specs {
        justify-content: end;
    }
    .staldia-materials-card-extension-container {
        background: var(--color-accent);
        border-radius: 99px;
        width: 80px;
        padding: .5rem 0;
        border: 1px solid var(--color-accent);
        transition: background .5s;
    }
    .staldia-materials-card:hover .staldia-materials-card-extension-container {
        background: transparent;
    }
    .staldia-materials-card-extension {
        transition: background-color .5s;
    }
    .staldia-materials-card-link:before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }
    @media (min-width: 900px) {
        .staldia-materials-card-container {
            grid-template-columns: auto 10rem;
        }
    }
}
@layer override {
    .staldia-materials-card:hover .staldia-materials-card-extension {
        background-color: var(--color-accent);
    }
}