JustalK/PORTFOLIO

@import (reference) "libs/constants.less";
@import (reference) "libs/mixins.less";
 
#PROJECT {
    position: relative;
    overflow: hidden;
    .transition(all 0.5s cubic-bezier(0.8, 0, 0.25, 1) 1.5s);
 
    &.locked {
        pointer-events: none;
    }
 
    & > div {
        margin: auto;
        max-width: 1200px;
        width: 100%;
        position: relative;
    }
 
    & .text {
        opacity: 1;
 
        &::before,
        &::after {
            .transition(all 0.5s cubic-bezier(0.8, 0, 0.25, 1));
        }
    }
 
    &.invisible {
        opacity: 0;
    }
}
 
@media screen and (max-width: @SCREEN_1800) {
    #PROJECT > div {
        max-width: 1200px;
    }
}
 
@media screen and (max-width: @SCREEN_1500) {
    #PROJECT > div {
        max-width: 1000px;
    }
}
 
@media screen and (max-width: @SCREEN_1400) {
    #PROJECT > div {
        max-width: 900px;
    }
}
 
@media screen and (max-width: @SCREEN_1200) {
    #PROJECT > div {
        max-width: 800px;
    }
}
 
@media screen and (max-width: @SCREEN_1100) {
    #PROJECT > div {
        max-width: 700px;
    }
}
 
@media screen and (max-width: @SCREEN_900) {
    #PROJECT > div {
        width: 90%;
        margin: auto;
    }
}