#site-product-categories {
    background: #000;
    padding-top: 70px;
    padding-bottom: 70px;
    background-size: auto 100%;
    background-position: right center;
    background-attachment: fixed;

    .wrap {
        display: grid;
        gap: 40px;
    }

    .categories {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;

        @media only screen and (max-width: 980px) {
            grid-template-columns: 1fr;
        }

        .category {
            padding-top: 70%;
            position: relative;
            cursor: pointer;
            background-size: cover;
            background-position: center;

            .name {
                background: linear-gradient(to right, transparent, var(--site-primary), transparent);
                padding: 10px 60px;
                font-size: 20px;
                text-transform: uppercase;
                color: #fff;
                background: #c10119;
                padding: 10px 20px;
                position: relative;
                z-index: 1;
                display: flex;
                align-items: center;
                margin: 10px;
                font-family: var(--font-heading);
    
                span {
                    color: #fff;
                    margin-left: auto;
                } 
            }

            .overlay {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, 0.1);
                display: flex;
                justify-content: center;
                align-items: center;
                transition: background-color 0.3s;
            }

            &:hover .overlay {
                background-color: rgba(193, 1, 25, 0.7);
                background-color: rgba(0, 0, 0, 0.8);
            }
        }
    }
}