.categories {
    --flex-gap: 2em;
   --cat-label: #554d46;  	
}

.categories h2 {
    text-align: center;
    margin-bottom: 1.5em;
}
.categories .flex {
    gap: var(--flex-gap);
}
.categories .flex-item {
    position: relative;
    -webkit-box-flex: calc(25% - var(--flex-gap));
        -ms-flex: calc(25% - var(--flex-gap));
            flex: calc(25% - var(--flex-gap));
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    max-height: 180px;
}
.categories .flex-item .img-wrapper {
    overflow: hidden;
}
.categories .flex-item img {
    width: 100%;
    height: auto;
    -webkit-transition: -webkit-transform 150ms ease;
    transition: -webkit-transform 150ms ease;
    -o-transition: transform 150ms ease;
    transition: transform 150ms ease;
    transition: transform 150ms ease, -webkit-transform 150ms ease;
}
.categories .flex-item a:hover img,
.categories .flex-item a:focus img {
    -webkit-transform: scale(1.05);
        -ms-transform: scale(1.05);
            transform: scale(1.05);
    -webkit-transform-origin: center;
        -ms-transform-origin: center;
            transform-origin: center;
}
.categories .flex-item .label {
    position: absolute;
    bottom: 1em;
    left: -0.5em;
    background-color: var(--cat-label);
    color: var(--light-text);
    padding: 0.2em 1em;
    min-width: 60%;
    font-family: 'Cera Pro', sans-serif;
    font-weight: 500;
    font-size: 1.6rem;
    letter-spacing: 1px;
}
.categories .flex-item .label::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 1.2em;
    top: -2em;
    width: 1em;
    height: 100%;
    -webkit-transform: skew(-50deg, 0deg);
        -ms-transform: skew(-50deg, 0deg);
            transform: skew(-50deg, 0deg);
    background-color: inherit;
    -webkit-box-shadow: inset 0 0 5px 5px var(--box-shadow-20);
            box-shadow: inset 0 0 5px 5px var(--box-shadow-20);
}

.categories .more {
    margin-top: 2.5em;
    text-align: center;
}
.categories .btn {
    font-family: 'Cera Pro', sans-serif;
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: 1px;
    padding: 0.5em 1em;
    border-radius: 0.4em;
}

@media screen and (max-width: 890px) {
    .categories .flex-item {
        -webkit-box-flex: calc(33.75% - var(--flex-gap));
        -ms-flex: calc(33.75% - var(--flex-gap));
        flex: calc(33.75% - var(--flex-gap));
        max-height: unset;
        -webkit-box-flex: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
    }
}
@media screen and (max-width: 768px) {
    .categories .flex-item {
        -webkit-box-flex: calc(50% - var(--flex-gap));
        -ms-flex: calc(50% - var(--flex-gap));
        flex: calc(50% - var(--flex-gap));
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
    }
}
@media screen and (max-width: 460px) {
    .categories .flex-item {
        -webkit-box-flex: 100%;
        -ms-flex: 100%;
        flex: 100%;
    }
    .categories .flex-item .label {
        bottom: 1.5em;
    }
    .categories .flex-item .label::before {
        top: -2.05em;
    }
}