@import "./colors.scss";
.portfolio {
    background-color: $odd;
    display: grid;
    justify-items: center;
    h1 {
        font-size: calc(90px + 0.390625vw);
        max-height: 100px;
        text-align: center;
    }
    .row{
        margin-top: -5%;
        width: 960px;
        max-height: 250px;
        justify-content: center;
        .col{
            max-width: 290px;
            max-height: 250px;
        }
        img{
            width: 250px;
            height: auto;
            border-radius: 12px;
            transition: ease-in-out 0.2s;
        }
        img:hover{
            filter: blur(1px);
            transition: ease-in-out 0.2s;
        }
    }
    }

    // ------------------------------------------------RESPONSIVE SETTINGS
    @media only screen and (max-width: 960px) {
        // none
      }
      
      @media only screen and (max-width: 810px) {
        $scale-tablet: 23vw;
        .portfolio{
            justify-content: center !important;
            width: 100%;
            h1{
                font-size: 11vw !important;
                margin: 0;
            }
            img{
                width: $scale-tablet !important;
                border-radius: 12px;
            }
            .col{
                margin: 0 2vw 0 2vw;
                padding: 0;
            }
            .row{
                height: min-content !important;
                width: 100% !important;
            }
        }
      }
      
      @media only screen and (max-width: 400px) {
        $scale-phone: 45vw;
        .portfolio {
            .row{
                width: 110% !important;
                overflow-x: scroll;
                display: flex;
                .col{
                    width: auto !important;
                    height: auto !important;
                    margin: 0;
                }
                img{
                    width: 40vw !important;
                }
            }
            }
      }