.category-boxes {
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px
}

    .category-boxes .box-header {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100%
    }

.box-title {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px
}

    .box-title h3 {
        color: var(--Black, #000);
        font-family: Pilat Extended;
        font-size: 18px;
        font-style: normal;
        font-weight: 900;
        line-height: 18px;
        text-transform: capitalize
    }

    .box-title p {
        color: var(--Gray-3, #808080);
        font-family: Pilat;
        font-size: 12px;
        font-style: normal;
        font-weight: 600;
        line-height: normal
    }

.box-buttons {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px
}

    .box-buttons .action-button {
        display: inline-flex;
        cursor: pointer;
        display: flex;
        padding: 9px 16px;
        justify-content: center;
        align-items: center;
        gap: 10px;
        border-radius: 100px;
        background: #cdd2cf40;
        width: 42px;
        height: 42px
    }

        .box-buttons .action-button svg {
            stroke-width: 2px;
            stroke: var(--Black, #000);
            width: 10px;
            height: 20px
        }

.box-content {
    display: inline-flex;
    align-items: flex-start;
    gap: 20px
}

    .box-content .grid__layout {
        width: 100%;
        min-width: 440px;
        height: 310px;
        position: relative
    }

    .box-content .grid__box > img {
        width: 100%;
        min-width: 210px;
        height: 410px;
        flex-shrink: 0;
        object-fit: cover
    }

    .box-content .grid__box > span {
        color: var(--White, #FFF);
        font-family: Pilat Compressed;
        font-size: 40px;
        font-style: normal;
        font-weight: 900;
        line-height: 33px;
        text-transform: capitalize;
        position: absolute;
        bottom: 15px;
        z-index: 999999999999;
        left: 15px
    }

.box__inner-content > a {
    text-decoration: none;
    flex: 1
}

.box-content.scrollbar {
    max-width: 100%;
    overflow: hidden;
    width: 100%
}

.box__inner-content {
    display: inline-flex;
    align-items: flex-start;
    gap: 20px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 30px;
    width: 100%;
    flex-direction: row
}

    .box__inner-content::-webkit-scrollbar {
        display: none
    }

.box-buttons .action-button[data-action=prev] {
    padding-left: 12px
}

.box-buttons .action-button[data-action=next] {
    padding-right: 12px
}

@media screen and (max-width: 576px) {
    .box-content .grid__layout {
        min-width: 80vw !important
    }
}

@media screen and (max-width: 990px) {
    .box-content .grid__box {
        width: 100%
    }

    .box-content .grid__layout {
        min-width: 330px
    }

    .box-content .grid__box > img {
        width: 100%;
        min-width: unset
    }

    .category-boxes {
        padding-top: 0 !important;
        padding-bottom: 0 !important
    }

    .box__inner-content {
        padding-bottom: 15px
    }

    .box-buttons .action-button {
        padding: 12px;
        gap: 0
    }

        .box-buttons .action-button svg {
            width: 18px;
            height: 18px
        }

        .box-buttons .action-button[data-action=prev] svg {
            padding-right: 4px
        }

        .box-buttons .action-button[data-action=next] svg {
            padding-left: 2px
        }
}

@media screen and (min-width: 768px) {
    .box-buttons .action-button:hover, .box__inner-content > a:hover {
        opacity: .65
    }
}