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

.categoryGrid {
    display: grid;
    gap: consts.$gap-medium;

    grid-auto-columns: 310px;
    grid-auto-rows: 349px;
    padding: 0;

    grid-template-columns: repeat(4, 1fr);
    grid-template-areas: 'block1 block1 block2 block3'
    'block1 block1 block4 block5'
    'block6 block7 block8 block9';

    &::after {
        content: none;
        display: none;
    }


    @for $i from 1 to 10 {
        & > .category_grid_item:nth-child(#{$i}) {
            grid-area: block#{$i};
        }
    }

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

        grid-auto-columns: 232px;
        grid-auto-rows: 271px;
    }

    @include mixins.media(md){
        grid-auto-columns: 162px;
        grid-auto-rows: 198px;
    }

    @include mixins.media(sm){
        gap: consts.$gap-medium;

        grid-auto-columns: 163px;
        grid-template-rows: 173px 173px repeat(auto-fill, 194px);

        grid-template-columns: repeat(2, 1fr);
        grid-template-areas: 'block1 block1'
        'block1 block1'
        'block2 block3'
        'block4 block5'
        'block6 block7'
        'block8 block9'
        ;
    }
    
    & > .category_grid_item {
        display: flex;
        flex-direction: column;
        row-gap: consts.$gap-base;
        color: inherit;
        text-decoration: inherit;

        @include mixins.media(sm){
            row-gap: 15px;
        }

        & > .title{
            height: 19px;
        }

        & > .image {
            position: relative;

            overflow: hidden;
            width: 100%;
            height: var(--size, 310px);
            img {
                width: 100%;
                object-fit: cover;
            }
            
            &::after{
                bottom: -40px;
                right: -40px;
                @include mixins.circle-base(80px);
            }

            &.--2x2 {
                height: 689px;
           
                @include mixins.media(lg){
                    height: 527px;
                }

                @include mixins.media(md){
                    width: 348px;
                    height: 387px;
                }
                
                @include mixins.media(sm){
                    width: 345px;
                    height: 345px;
                }
            }
            

            @include mixins.media(lg){
                --size: 232px;
            }

            @include mixins.media(md){
                --size: 162px;
            }

            @include mixins.media(sm){
                --size: 163px;
            }
        }

        & > .title {
            @include mixins.text('text-4-bold');
            @include mixins.lineClamp(1);
        }
    }
}