@use '../consts.scss' as consts;
@use '../mixins.scss' as mixins;

.categoryPreview {
    display: flex;
    gap: 30px;
    margin-bottom: 100px;

    .category-preview-item {
        .image {
            display: block; 
            width: 310px;
            height: 310px;
            overflow: hidden;
            
            @include mixins.media(lg){
                width: 232px;
                height: 232px;
            }

            @include mixins.media(md){
                width: 162px;
                height: 162px;
            }

            @include mixins.media(sm){
                width: 163px;
                height: 163px;
            }

            img {
                width: 100%;
                object-fit: cover;
            }
        }
    }

    .content {
        padding-top: 20px;
        
        text-align: center;

        .title {
        color: unset;
        text-decoration: none;
        font-weight: 700;
        }
    }

    @include mixins.media(lg) {
        gap: 24px;
    }

    @include mixins.media(sm) {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 19px;
        margin-bottom: 60px;
    }
}