.catalog-products-layout{
    width: min(1200px, 100%);
    margin-block: var(--space-lg);
    padding-inline: clamp(12px, 4vw, 20px);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    span{
        font-size: var(--font-size-xxl);
        font-weight: 500;
    }

    .catalog-products-layout-head{
        display: flex;
        flex-direction: column;
        gap: 0;
        span:last-child{
            font-weight: 400;
            font-size: var(--font-size-lg);
            opacity: 0.6;
            margin-top: calc(var(--space-sm) * -1);
        }
    }

    .catalog-products-layout-columns{
        color: black;
        h3{
            font-size: var(--font-size-sm);
            font-weight: 600;
        }

        h4{
            font-size: var(--font-size-md);
            font-weight: 500;
            height: 150px;
        }
        display: grid;
        grid-template-columns: repeat(6, 320px);
        gap: var(--space-md);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;


        .catalog-products-layout-section{
            cursor: default;
            scroll-snap-align: start;
            width: 100%;
            height: 250px;
            background: white;
            display: flex;
            flex-direction: column;
            padding: var(--space-lg);
            border-radius: var(--radius-xl);
            position: relative;
            overflow: hidden;

            a{
                width: 120px;
                margin-left: auto;
            }
        }
    }

}

.catalog-products-layout-columns{
    scrollbar-width:none;
}

.catalog-products-layout-columns::-webkit-scrollbar{
    display:none;
}

@media (max-width: 1079px) {
    .catalog-products-layout-scroller{
        display: none;
    }
}

@media (min-width: 1080px) {
    .catalog-products-layout-columns{
        overflow-x: hidden;
    }

    .catalog-products-layout{
        width: min(1200px, 90%);     
    }

    .catalog-products-layout-scroller{
        display: flex;
        justify-content: end;
        width: 100%;
        gap: var(--space-md);

        .catalog-products-layout-scroller-button{
            background-color: var(--color-dark-gray);
            border-radius: var(--radius-round);
            display: flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            aspect-ratio: 1;
            cursor: pointer;
            svg{
                cursor: pointer;
            }
        }

        .catalog-products-layout-scroller-button.disabled{
            opacity: 0.3;
            cursor:auto;
            svg{
                cursor: auto;
            }
        }
    }
}