@layer reset {
    *,
    ::before,
    ::after {box-sizing: border-box;}

    :where(:not(dialog)) {
        margin: 0;
    }
}

@layer demo {
    :root {
        color-scheme: dark;
        --nav-block-size: 74px;
    }
}

@layer components.navbar {


    .cart {
        display: grid;
        grid-auto-flow: column;
        place-items: center;
        gap: 2px;
    }

    .cart-icon-wrapper {
        padding: 2px;
        inline-size: 1.5rem;
        block-size: 1.5rem;
    }

    .nav-icon-svg {
        block-size: auto;
        display: block;
        max-inline-size: 100%;
    }
}

@layer components.collections {
    .section {
        background-color: black;
        display: grid;
        inline-size: 100%;
        min-block-size: max(600px, calc(100dvb - var(--nav-block-size)));
        padding-block-end: 0.75rem;
        padding-inline: 0.75rem;
        place-items: center;
        position: relative;
    }

    .cards {
        background-color: black;
        block-size: 100%;
        display: grid;
        gap: 1rem;
        inline-size: 100%;

        @media (width > 1024px) {
            grid-template-columns: 1fr 1fr;
        }
    }

    .card {
        container-type: size;
        inline-size: 100%;
        block-size: 100%;
        text-decoration: none;
        min-block-size: 280px;
        position: relative;

        &:hover::after {
            opacity: 1;
        }

        &::after {
            content: '';
            display: block;
            inset: 0;
            mix-blend-mode: multiply;
            opacity: 0;
            position: absolute;
            transition: opacity 0.2s ease;
        }
    }
    .card-1::after {background-color: hsl(0, 60%, 70%);}
    .card-2::after {background-color: hsl(60, 60%, 70%);}
    .card-3::after {background-color: hsl(120, 60%, 70%);}
    .card-4::after {background-color: hsl(180, 60%, 70%);}
    
    .visual {
        background-color: black;
        block-size: 100%;
        display: grid;
        inline-size: 100%;
        overflow: hidden;
        place-items: center;

        >* {
            grid-area: 1/1;
        }
    }

    .card-img {
        block-size: 100cqb;
        inline-size: 100cqi;
        border-radius: inherit;
        display: block;
        background: conic-gradient(from 90deg at 50% 0%, #111, 50%, #222, #111);
        filter: grayscale(0);
        object-fit: cover;
    }

    .figcaption {
        z-index: 2;
        color: white;
        font: 400 8cqi / normal system-ui, sans-serif;
    }
}