/*!
Author:       Wouter Veltman
Version:      6.5.5
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
*/

.categories-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;

    .category:nth-child(5n) {
        margin-right: 0;
        width: 20%;
    }

    .category {
        width: calc( 20% - 10px);
        height: 280px;
        margin: 0 10px 10px 0;
        display: flex;
        flex-direction: column;
        justify-content: end;
        text-decoration: none;
        position: relative;
        z-index: 0;
        border-radius: 10px;
        overflow: hidden;

        .image {
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
            background-position: center center;
            background-repeat: no-repeat;
            background-size: cover;
            transition-timing-function: ease-in;
            transition-duration: .25s;
        }

        .gradient-bg {
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
            background-image: linear-gradient(rgba(0,0,0,0) 60%, rgba(0,0,0));
            z-index: 1;
        }

        span {
            position: relative;
            z-index: 2;
            color: var(--white, #FFFFFF);
            font-family: Silka;
            font-size: 18px;
            font-style: normal;
            font-weight: 400;
            line-height: 27px;
            margin: 0 0 32px 26px;
        }
    }

    .category:hover {
        .image {
            transform: scale(1.2);
        }
    }
}

@media screen and (max-width: 640px){
    .categories-container {
        .category {
            width: 100% !important;
            margin-right: 0 !important;
        }
    }
}

@media screen and (min-width: 641px) and (max-width: 768px) {
    .categories-container {
        .category:nth-child(2n) {
            width: 50% !important;
            margin-right: 0 !important;
        }

        .category:nth-child(5n) {
            width: calc(50% - 10px);
            margin-right: 10px;
        }

        .category {
            width: calc(50% - 10px);
        }
    }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
    .categories-container {
        .category:nth-child(3n) {
            width: calc((100% / 3));
            margin-right: 0;
        }

        .category:nth-child(4n),
        .category:nth-child(5n) {
            width: calc((100% / 3) - 10px);;
            margin-right: 10px;
        }

        .category {
            width: calc((100% / 3) - 10px);
        }
    }
}

@media screen and (min-width: 1025px) and (max-width: 1356px) {
    .categories-container {
        .category:nth-child(4n) {
            width: 25%;
            margin-right: 0;
        }

        .category:nth-child(5n) {
            width: calc(25% - 10px);
            margin-right: 10px;
        }

        .category {
            width: calc(25% - 10px);
        }
    }
}