/* ==========================================
   CATEGORIES
========================================== */

.categories {

    padding: 90px 0 140px;

    background: var(--color-surface);

}

/* ========================================
   SECTION HEADER
========================================== */

.section-header {

    text-align: center;

    margin-bottom: 60px;

}

.section-header h2 {

    font-size: 40px;

    font-weight: 800;

    color: var(--color-text);

    margin-bottom: 16px;

}

.section-header p {

    font-size: 18px;

    color: #777777;

}

/* ==========================================
   GRID
========================================== */

.category-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 42px;

}

/* ==========================================
   CARD
========================================== */

.category-card {

    position: relative;

    display: block;

    border-radius: 24px;

    text-decoration: none;

    aspect-ratio: 4 / 5;

    background: transparent;

    box-shadow: 0 12px 30px rgba(0,0,0,.08);

    transition:
        transform .35s ease,
        box-shadow .35s ease; 

}

/* ==========================================
   IMAGE
========================================== */

.reveal-wrapper img {

    width: 100%;

    height: 100%;

    object-fit: cover;
    object-position: center;

    transition: transform .6s ease;

}

/* ==========================================
   OVERLAY
========================================== */

.category-overlay {

    position: absolute;

    inset: 0;

    display: flex;

    align-items: flex-end;

    padding: 28px;

    background:
        linear-gradient(
            transparent 45%,
            rgba(0,0,0,.65) 100%
        );

}

/* ==========================================
   TITLE
========================================== */

.category-overlay h3 {

    color: #ffffff;

    font-size: 30px;

    font-weight: 700;

    margin: 0;

}

/* ==========================================
   HOVER
========================================== */

.category-card:hover {

    transform: translateY(-8px);

    box-shadow: 0 24px 50px rgba(0,0,0,.16);

}

.category-card:hover .reveal-wrapper img {

    transform: scale(1.06);

}

/* ==========================================
   REVEAL-WRAPPER
========================================== */

.reveal-wrapper{

    display: block;
    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;

    border-radius: inherit;

}