@import "../components/_badge-d9zDXNl.css";
@import "../components/_card-k7sJLof.css";

#homepage section {
    padding: var(--space-l) 0;
}

/* section category */
    #category .category-container {
        display: flex;
        align-items: center;
        overflow: hidden;
        isolation: isolate;
        border-radius: var(--radius);
    }
    #category .category-container .category-card,
    #category .category-container .category-card picture {
        height: 100%;
    }
    #category .category-container .category-card:before {
        content: "";
        position: absolute;
        z-index: 1;
        width: 100%;
        height: 100%;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: linear-gradient(0deg, var(--primary), transparent);
    }
    #category .category-container .category-card picture img{
        object-fit: cover;
    }
    #category .category-container .category-card .row {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 1.4rem;
        z-index: 2;
    }
    #category .category-container .category-card .row h3 {
        color: var(--white);
    }
    @media screen and (min-width: 1025px) {
        #category .category-container {
            height: 60vh;
        }
        #category .category-container .category-card {
            width: calc(100% / 3);
            transition: var(--fast-transition);
        }
        #category .category-container .category-card:hover {
            width: 75%;
            transition: var(--fast-transition);
        }
    }
    @media screen and (max-width: 1024px) {
        #category .category-container {
            flex-direction: column;
            gap: var(--space-s);
        }
        #category .category-container .category-card {
            width: 100%;
            height: 30vh;
            border-radius: var(--radius);
            overflow: hidden;
            transition: var(--fast-transition);
        }
    }

/* section blog */
    section#blog {
        padding: var(--space-xl) 0;
        color: var(--white);
    }

/* section store */
    section#store {
        border-top: 2px solid var(--white);
    }
    section#store .container .column{
        max-width: 50rem;
        text-align: center;
        margin: auto;
        background: hsla(var(--primary-values), 90%);
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
        border-radius: var(--radius);
        padding: 2rem;
        color: var(--white);
        text-wrap-style: balance;
        text-wrap: balance;
    }