:root {
    --cw-grid-gap: 20px;
    --cw-grid-gap-mobile: 6px;

    /* Высоты строк десктопной сетки */
    --cw-row-large: 36.5vw;
    --cw-row-small: 18.25vw;
    --cw-row-medium: 23.4vw;

    /* Высота всех строк на планшетах и мобильных */
    --cw-row-mobile: 60vw;
}


.cw-banner {
    min-height: var(--cw-row-small);
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    text-align: center;
    padding: 40px;
    background-size: cover;
    background-position: 50% 50%;
    margin-bottom: var(--cw-grid-gap);
}
.cw-banner .title {
    font-size: var(--pt48);
    text-transform: uppercase;
    margin: 0 0 20px 0;
}
.cw-banner .desc {
    font-size: var(--pt24);
    margin: 0 0 40px 0;
}
.cw-banner .cta {
    width: auto;
    max-width: 33vw;
    margin: 0 auto;
}
.cw-banner--concept {
    background-image: url('../img/cw/concept.jpg');
}
.cw-banner--pdf {
    background-image: url('../img/cw/pdf.jpg');
    
}
.cw-banner--notfound {
    background-image: url('../img/cw/notfound.jpg');
}

/* Базовая сетка */

.cw-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--cw-grid-gap);
    width: 100%;
    margin-bottom: var(--cw-grid-gap);
}

.cw-grid__item {
    position: relative;

    min-width: 0;
    min-height: 0;
    padding: 20px;
    overflow: hidden;

    background-color: #eff2f2;
    background-size: cover;
    background-position: 50% 0;
    color: #333;
    text-decoration: none;
    font-size: var(--pt24, 24px);
}

.cw-grid__item::after {
    content: "";

    position: absolute;
    right: 20px;
    bottom: 20px;

    width: 32px;
    height: 32px;

    border-right: 8px solid #fff;
    border-bottom: 8px solid #fff;

    pointer-events: none;
}

.cw-grid__item h3 {
    margin: 0;
}

/*
 * Привязка категорий к grid-area.
 *
 * Эти правила не зависят от порядка элементов в HTML.
 */

/* Первая группа */

.cw-category--tees {
    grid-area: tees;
    background-image: url("../img/cw/tees.jpg");
}

.cw-category--outerwear {
    grid-area: outerwear;
    background-image: url("../img/cw/outerwear.jpg");
}

.cw-category--hoodies {
    grid-area: hoodies;
    background-image: url("../img/cw/hoodies.jpg");
}

.cw-category--headwear {
    grid-area: headwear;
    background-image: url("../img/cw/headwear.jpg");
}

.cw-category--knitwear {
    grid-area: knitwear;
    background-image: url("../img/cw/knitwear.jpg");
}

.cw-category--bags {
    grid-area: bags;
    background-image: url("../img/cw/bags.jpg");
}

.cw-category--totes {
    grid-area: totes;
    background-image: url("../img/cw/totes.jpg");
}

/* Вторая группа */

.cw-category--cardholders {
    grid-area: cardholders;
    background-image: url("../img/cw/cardholders.jpg");
}

.cw-category--keychains {
    grid-area: keychains;
    background-image: url("../img/cw/keychains.jpg");
}

.cw-category--lunchboxes {
    grid-area: lunchboxes;
    background-image: url("../img/cw/lunchboxes.jpg");
}

.cw-category--electronics {
    grid-area: electronics;
    background-image: url("../img/cw/electronics.jpg");
}

.cw-category--stationery {
    grid-area: stationery;
    background-image: url("../img/cw/stationery.jpg");
}

/* Третья группа */

.cw-category--jibbitz {
    grid-area: jibbitz;
    background-image: url("../img/cw/jibbitz.jpg");
}

.cw-category--drinkware {
    grid-area: drinkware;
    background-image: url("../img/cw/drinkware.jpg");
}

.cw-category--stickers {
    grid-area: stickers;
    background-image: url("../img/cw/stickers.jpg");
}

.cw-category--toiletry {
    grid-area: toiletry;
    background-image: url("../img/cw/toiletry.jpg");
}

.cw-category--badges {
    grid-area: badges;
    background-image: url("../img/cw/badges.jpg");
}

.cw-category--home {
    grid-area: home;
    background-image: url("../img/cw/home.jpg");
}

.cw-category--travel {
    grid-area: travel;
    background-image: url("../img/cw/travel.jpg");
}

.cw-category--sports {
    grid-area: sports;
    background-image: url("../img/cw/sports.jpg");
}

/*
 * Первая сетка, десктоп:
 *
 * tees       outerwear   hoodies
 * headwear   knitwear    knitwear
 * bags       bags        totes
 */

.cw-grid--first {
    grid-template-areas:
        "tees     outerwear hoodies"
        "headwear knitwear  knitwear"
        "bags     bags      totes";

    grid-template-rows:
        var(--cw-row-large)
        var(--cw-row-small)
        var(--cw-row-medium);
}

/*
 * Вторая сетка, десктоп:
 *
 * cardholders keychains  lunchboxes
 * electronics stationery stationery
 */

.cw-grid--second {
    grid-template-areas:
        "cardholders keychains  lunchboxes"
        "electronics stationery stationery";

    grid-template-rows:
        var(--cw-row-large)
        var(--cw-row-medium);
}

/*
 * Третья сетка, десктоп:
 *
 * jibbitz       drinkware stickers
 * toiletry      toiletry      badges
 * home          travel        sports
 */

.cw-grid--third {
    grid-template-areas:
        "jibbitz       drinkware stickers"
        "toiletry      toiletry      badges"
        "home          travel        sports";

    grid-template-rows:
        var(--cw-row-medium)
        var(--cw-row-small)
        var(--cw-row-large);
}

/*
 * Планшеты и мобильные устройства.
 *
 * Все строки имеют высоту 50% ширины окна.
 */

@media (max-width: 991px) {

    .cw-banner {
        min-height: var(--cw-row-mobile);
        padding: 12px;
        background-position: 50% 50%;
        margin-bottom: var(--cw-grid-gap-mobile);
    }
    .cw-banner .title {
        font-size: var(--pt24);
        margin: 0 0 6px 0;
    }
    .cw-banner .desc {
        font-size: var(--pt14);
        margin: 0 0 12px 0;
    }
    .cw-banner .cta {
        width: auto;
        max-width: 100vw;
    }
    
    .cw-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--cw-grid-gap-mobile);
        margin-bottom: var(--cw-grid-gap-mobile);
    }

    .cw-grid__item {
        padding: 12px;
        font-size: 14px;
        background-position: 30% 50%;
    }

    .cw-grid__item::after {
        right: 12px;
        bottom: 12px;
        width: 16px;
        height: 16px;

        border-right-width: 4px;
        border-bottom-width: 4px;
    }

    /*
     * tees      outerwear
     * hoodies   headwear
     * knitwear  knitwear
     * bags      totes
     */

    .cw-grid--first {
        grid-template-areas:
            "tees     outerwear"
            "hoodies  headwear"
            "knitwear knitwear"
            "bags     totes";

        grid-template-rows:
            repeat(4, var(--cw-row-mobile));
    }

    /*
     * cardholders keychains
     * stationery   stationery
     * lunchboxes   electronics
     */

    .cw-grid--second {
        grid-template-areas:
            "cardholders keychains"
            "stationery   stationery"
            "lunchboxes   electronics";

        grid-template-rows:
            repeat(3, var(--cw-row-mobile));
    }

    /*
     * jibbitz        drinkware
     * stickers badges
     * toiletry       toiletry
     * home  travel
     * sports         sports
     */

    .cw-grid--third {
        grid-template-areas:
            "jibbitz          drinkware"
            "stickers badges"
            "toiletry         toiletry"
            "home    travel"
            "sports           sports";

        grid-template-rows:
            repeat(5, var(--cw-row-mobile));
    }
}