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

.blocks {
    display: flex;
    flex-direction: column;
    --blocks-space: 100px;
    row-gap: var(--blocks-space);
    
    &.--tiny {
        row-gap: consts.$gap-medium;
    }    
    &.--tiny-large {
        row-gap: consts.$gap-large;
    }

    &.--with-top-margin {
        margin-top: 180px;

        @include mixins.media(lg) {
            margin-top: 90px;
        }    
    }
    
    @include mixins.media(md) {
        --blocks-space: 80px;
    }      
    
    @include mixins.media(sm) {
        --blocks-space: 60px;
    }    
}

.main {
    margin-top: 180px;

    @include mixins.media(lg) {
        margin-top: 90px;
    }    
}