@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

@media only screen and (min-width:1250px) {

    .content > ul{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 40px;
        padding-bottom: 100px;
    }

    .content > ul .row-left{
        position: relative;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 40px;
        /* width: 100%; */
        color: white;
    }
    
    .row-3x1-block-1 h1{
        text-align: center;
        color: white;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .content > ul .row-right{
        position: relative;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 40px;
        width: 100%;
        color: white;
        text-align: right;
    }

    .content >ul .row-left .block-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 20px;
        width: 512px;
        height: 288px;
    }
    
    .content >ul .row-right .block-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-end;
        gap: 20px;
        width: 512px;
        height: 288px;
    }

    .row-3x1-img-block-content {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
        text-align: center;
        gap: 50px;
        width: 100%;
    }

    .row-3x1-img-block-content .row-3x1-block-1 > p {
        font-size: 14px;
        font-weight: 400;
        line-height: 180%;
        letter-spacing: 0.05em;
        width: 320px;
        color: white;
    }

    .row-3x1-img-block-content .row-3x1-block-1 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .row-3x1 {
        width: 100%;
    }

    .grid{
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 100%;
        /* padding-left: 13.888vw;
        padding-right: 13.888vw; */
        gap: 25px;
    }


.img-block-w330-h330 {
    position: relative;
    width: 330px;
}

.img-block-w330-h330 > img {
    width: 330px;
}

.img-block-w330-h330 > h1 {
    position: absolute;
    top: 15px;
    left: 20px;
    right: 20px;
    font-weight: 700;
    font-size: 26px;
    line-height: 31px;
    letter-spacing: 0.05em;
    color: white;
}

.img-block-w330-h330 > p {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    font-weight: 400;
    font-size: 14px;
    line-height: 180%;
    color: rgba(255, 255, 255, 0.5);;
}

.img-block-w685-h330{
    position: relative;
    width: 685px;
}

.img-block-w685-h330 > img {
    width: 685px;
}

.img-block-w685-h330 > h1 {
    position: absolute;
    top: 15px;
    left: 20px;
    right: 20px;
    font-weight: 700;
    font-size: 26px;
    line-height: 31px;
    letter-spacing: 0.05em;
    color: white;
}

.img-list-content {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 20px;
    display: block;

}

.img-list-content > h2 {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
}

.img-list-content > p {
    font-weight: 400;
    font-size: 14px;
    line-height: 180%;
    color: rgba(255, 255, 255, 0.5);;
}
}

@media only screen and (min-width:535px) and (max-width:1250px){
    
    #menu-collapse{
        margin: 0px;
    }

    section{
        padding-bottom: 20px;
    }
    
    ul{
        margin: 0px;
        width: 100%;
        list-style-type: none;
    }

    #portfolio-block {
        margin-bottom: 50px;
    }

    .row-left{
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 20px;
        /* width: 100%; */
        height: 500px;
        color: white;
    }
    
    .row-right{
        position: relative;
        display: flex;
        flex-direction: column-reverse;
        justify-content: center;
        align-items: center;
        gap: 20px;
        /* width: 100%; */
        color: white;
        height: 500px;
    }

    .long-row-left{
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: 20px;
        /* width: 100%; */
        height: 600px;
        color: white;
    }
    
    .long-row-right{
        position: relative;
        display: flex;
        flex-direction: column-reverse;
        justify-content: flex-end;
        align-items: center;
        gap: 20px;
        /* width: 100%; */
        color: white;
        height: 600px;
    }

    .block-content {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: 10px;
        /* width: 512px; */
        width: 70%;
        height: 200px;
        text-align: center;
    }

    p{
        display: flex;
        flex-direction: row;
        justify-content: center;
        font-weight: 100;
        color: white;
    }
    h1{
        display: flex;
        flex-direction: row;
        justify-content: center;
        color: white;
    }

    .row-3x1-img-block-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        width: 70%;
    }

    .row-3x1 {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .row-3x1-block-1{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 20px;
    }

    .grid{
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;

        gap: 25px;
    }


    .img-block-w330-h330 {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 330px;
        gap: 20px;
    }

    .img-block-w330-h330 > img {
        width: 309.312px;
        height: 309.312px;
    }

    .img-block-w685-h330{
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 20px;
        width: 330px;
    }

    .img-block-w685-h330 > img {
        width: 309.312px;
        height: 149.0116px;
    }

    .img-list-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 70%;
        text-align: center;
    }

    .img-list-content h2{
        font-size: 14px;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.5);
    }

    .img-list-content p{
        font-weight: 400;
        font-size: 14px;
        line-height: 180%;
        color: rgba(255, 255, 255, 0.5);;
    }
}

@media only screen and (min-width:390px) and (max-width:535px){

    section{
        padding-bottom: 20px;
    }
    
    ul{
        margin: 0px;
        width: 100%;
        list-style-type: none;
    }

    #portfolio-block {
        margin-bottom: 50px;
    }

    .row-left{
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 20px;
        /* width: 100%; */
        height: 500px;
        color: white;
    }
    
    .row-right{
        position: relative;
        display: flex;
        flex-direction: column-reverse;
        justify-content: center;
        align-items: center;
        gap: 20px;
        /* width: 100%; */
        color: white;
        height: 500px;
    }

    .long-row-left{
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: 20px;
        /* width: 100%; */
        height: 600px;
        color: white;
    }
    
    .long-row-right{
        position: relative;
        display: flex;
        flex-direction: column-reverse;
        justify-content: flex-end;
        align-items: center;
        gap: 20px;
        /* width: 100%; */
        color: white;
        height: 600px;
    }

    .block-content {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: 10px;
        /* width: 512px; */
        width: 70%;
        height: 200px;
        text-align: center;
    }

    p{
        display: flex;
        flex-direction: row;
        justify-content: center;
        font-weight: 100;
        color: white;
    }
    h1{
        display: flex;
        flex-direction: row;
        justify-content: center;
        color: white;
    }

    .row-3x1-img-block-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        width: 70%;
    }

    .row-3x1 {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .row-3x1-block-1{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 20px;
    }

    .grid{
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;

        gap: 25px;
    }


    .img-block-w330-h330 {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 330px;
        gap: 20px;
    }

    .img-block-w330-h330 > img {
        width: 309.312px;
        height: 309.312px;
    }

    .img-block-w685-h330{
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 20px;
        width: 330px;
    }

    .img-block-w685-h330 > img {
        width: 309.312px;
        height: 149.0116px;
    }

    .img-list-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 70%;
        text-align: center;
    }

    .img-list-content h2{
        font-size: 14px;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.5);
    }

    .img-list-content p{
        font-weight: 400;
        font-size: 14px;
        line-height: 180%;
        color: rgba(255, 255, 255, 0.5);;
    }
}

@media only screen and (min-width:0px) and (max-width:390px){
    
    section{
        padding-bottom: 20px;
    }
    
    ul{
        margin: 0px;
        width: 100%;
        list-style-type: none;
    }

    .row-left{
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 20px;
        /* width: 100%; */
        color: white;
        height: 500px;
    }
    
    .row-right{
        position: relative;
        display: flex;
        flex-direction: column-reverse;
        justify-content: center;
        align-items: center;
        gap: 20px;
        /* width: 100%; */
        color: white;
        height: 500px;
    }

    .long-row-left{
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: 20px;
        /* width: 100%; */
        height: 700px;
        color: white;
    }
    
    .long-row-right{
        position: relative;
        display: flex;
        flex-direction: column-reverse;
        justify-content: flex-end;
        align-items: center;
        gap: 20px;
        /* width: 100%; */
        color: white;
        height: 700px;
    }

    .block-content {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: 10px;
        /* width: 512px; */
        width: 70%;
        height: 350px;
        text-align: center;
    }

    p{
        display: flex;
        flex-direction: row;
        justify-content: center;
        font-weight: 100;
        color: white;
    }

    h1{
        display: flex;
        flex-direction: row;
        justify-content: center;
        color: white;
    }

    .row-3x1-img-block-content {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: flex-start;
        width: 100%;
        gap: 20px;
    }

    .row-3x1-img-block-content .row-3x1-block-1 > p {
        font-size: 14px;
        font-weight: 400;
        line-height: 180%;
        letter-spacing: 0.05em;
        width: 320px;
        color: white;
    }

    .row-3x1-img-block-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        width: 70%;
    }

    .row-3x1 {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .row-3x1-block-1{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 20px;
    }

    .grid{
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;

        gap: 25px;
    }


    .img-block-w330-h330 {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 330px;
        gap: 20px;
    }

    .img-block-w330-h330 > img {
        width: 309.312px;
        height: 309.312px;
    }

    .img-block-w685-h330{
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 20px;
        width: 330px;
    }

    .img-block-w685-h330 > img {
        width: 309.312px;
        height: 149.0116px;
    }

    .img-list-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 70%;
        text-align: center;
    }

    .img-list-content h2{
        font-size: 14px;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.5);
    }

    .img-list-content p{
        font-weight: 400;
        font-size: 14px;
        line-height: 180%;
        color: rgba(255, 255, 255, 0.5);;
    }
}



ul{
    margin: 0 auto;
    padding: 0;
    list-style-type: none;
}