.container-header
{
    background-color: #F5F5F5;
    width: 100%;
    height: 800px;
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -webkit-user-drag: none;
    -moz-user-drag: none;
    display: flex;
    justify-content: center;
    align-items: center;
}


.container-header svg
{
   width: 1000px;
}
@media (max-width: 1100px) {
    .container-header
    {
        height: 600px
    }
}
@media (max-width: 550px) {
    .container-header
    {
        height: 400px
    }
}

.container-header #Dev{
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    will-change: filter;
    transform: translateZ(0);
     object-fit: none;
}


.container-header #Marketing {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    will-change: filter;
    transform: translateZ(0);
     object-fit: none;
}

.container-header #impression_copie {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    will-change: filter;
    transform: translateZ(0);
     object-fit: none;
}

.container-header #impression {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    will-change: filter;
    transform: translateZ(0);
     object-fit: none;
}

.container-header #Creation
{
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    will-change: filter;
    transform: translateZ(0);
     object-fit: none;
}

@media not all and (min-resolution: 0.001dpcm) {
    @supports (-webkit-appearance:none) {
        #Dev {
        filter: grayscale(100%) !important;
        -webkit-filter: grayscale(100%) !important;
        will-change: filter;
        transform: translate3d(0, 0, 0); /* force GPU paint */
      }
    }
  }
  



/* Loading Page */
.loading
{
    position: fixed;
    z-index: 1001;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    background-color: #272727;
    display: flex;
    justify-content: center;
    align-items: center;
    /* display: none; */
}

.loading .container-image
{
    /* background-color: red; */
    width: 500px;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.loading .container-image .logo-loading
{
    width: 300px;
    z-index: 2;
}

.loading .container-image .bird
{
    width:130px;
    height: 130px;
    background-image: url(../images/bird1.png);
    background-size: 130px 130px;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    right: 380px;
    top: 165px;
    z-index: 3;
}

@media (max-width: 1000px) {
    .loading .container-image .logo-loading
    {
        width: 150px;
        z-index: 2;
    }

    .loading .container-image .bird
    {
        width:80px;
        height: 80px;
        background-image: url(../images/bird1.png);
        background-size: 80px 80px;
        background-repeat: no-repeat;
        background-position: center;
        position: absolute;
        right: 320px;
        top: 203px;
        z-index: 3;
    }
}

@media (max-width: 505px) {
    .loading .container-image .logo-loading
    {
        width: 130px;
        z-index: 2;
    }

    .loading .container-image .bird
    {
        width:50px;
        height: 50px;
        background-size: 50px 50px;
        left: 10px;
        top: 80px;
    }
    .loading .container-image
    {
        width: 230px;
        height: 230px;
    }
}


.bein-img-box img
{
    width: 100px;
    height: 100px;
    border-radius: 50%;
}


/* cursure bird */

.cursure-bird
{
    position: fixed;
    background-image: url("/assets/images/bird1.png");
    width: 100px;
    height: 100px;
    background-size: 50px 50px;
    background-repeat: no-repeat;
    z-index: 1000;
    display: block;
    pointer-events: none;
    transform: scaleX(-1);
    transition: transform 0.2s ease; 
    /* transition: 0.1s all; */
}

.portfolio {
    position: fixed;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.67);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    display: none;
}

.portfolio .container-portfolio-child {
    width: 1100px;
    height: 1000px; 
    display: grid;
    grid-template-rows: repeat(3, 300px);
    grid-template-columns: repeat(3, 300px);
    row-gap: 20px;
    column-gap: 20px;
    justify-content: center;
    align-content: start; 
    overflow-y: auto;
    box-sizing: border-box;
    padding-top: 30px;    
    padding-bottom: 30px;
    max-height: 90vh;     
}


.portfolio .container-portfolio-child::-webkit-scrollbar {
    width: 0px;
    height: 12px;
}

.portfolio .container-portfolio-child div:first-child
{
    grid-column: span 2;
}
.container-portfolio-child div:nth-child(3) {
    grid-row: span 2;
}
.container-portfolio-child div:nth-child(6) {
    grid-column: span 2;
}

.portfolio .container-portfolio-child img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 8px;
}

.portfolio .container-close-icone
{
   /* background-color: black; */
   width: 1100px;
   height: 60px;
   color: white;
   font-size: 30px;
}

.portfolio .container-close-icone i
{
    cursor: pointer;
}

@media(max-width: 1130px)
{
    .portfolio .container-portfolio-child {
        width: 1100px;
        display: grid;
        grid-template-rows: repeat(2, 350px);
        grid-template-columns: repeat(2, 350px);;
    
    }
    .portfolio .container-portfolio-child
    {
        width: 98%;
    }
    .portfolio .container-close-icone
    {
        width: 90%;
    }
    .portfolio .container-portfolio-child div:first-child
    {
        grid-column: auto;
    }
    .container-portfolio-child div:nth-child(3) {
        grid-row: auto;
    }
    .container-portfolio-child div:nth-child(6) {
        grid-column: auto;
    }
}

@media(max-width: 850px) {
    .portfolio .container-close-icone {
        padding-top: 15px;
        width: 100%;
    }

    .portfolio .container-portfolio-child {
        width: 100%;
        display: grid;
        grid-template-rows: repeat(2, 300px);
        grid-template-columns: repeat(2, 300px);
        row-gap: 20px;
        column-gap: 20px;
        overflow-y: auto;
        align-content: start;
        padding: 20px 0 50px;
        max-height: 90vh;
        box-sizing: border-box;
    }

    .portfolio .container-portfolio-child div:first-child {
        grid-column: auto;
    }

    .container-portfolio-child div:nth-child(3) {
        grid-row: auto;
    }

    .container-portfolio-child div:nth-child(6) {
        grid-column: auto;
    }

    .portfolio .container-portfolio-child img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 8px;
    }
}


@media(max-width: 650px) {
    .portfolio .container-portfolio-child {
        width: 100%;
        display: grid;
        grid-template-rows: repeat(1, 350px);
        grid-template-columns: repeat(1, 350px);
        row-gap: 20px;
        column-gap: 20px;
        overflow-y: auto;
        align-content: start;
        padding: 20px 0 50px;
        max-height: 90vh;
        box-sizing: border-box;
    }

    .portfolio .container-portfolio-child div:first-child {
        grid-column: auto;
    }

    .container-portfolio-child div:nth-child(3) {
        grid-row: auto;
    }

    .container-portfolio-child div:nth-child(6) {
        grid-column: auto;
    }

    .portfolio .container-portfolio-child img {
        width: 350px;
        height: 350px;
        object-fit: cover;
        border-radius: 8px;
    }

    .portfolio .container-close-icone {
        /* background-color: red; */
        width: 90%;
    }
}


@media(max-width: 385px) {
    .portfolio .container-portfolio-child {
        width: 100%;
        display: grid;
        grid-template-rows: repeat(1, 285px);
        grid-template-columns: repeat(1, 285px);
        row-gap: 20px;
        column-gap: 20px;
        overflow-y: auto;
        align-content: start;
        padding: 20px 0 50px;
        max-height: 90vh;
        box-sizing: border-box;
    }

    .portfolio .container-portfolio-child div:first-child {
        grid-column: auto;
    }

    .container-portfolio-child div:nth-child(3) {
        grid-row: auto;
    }

    .container-portfolio-child div:nth-child(6) {
        grid-column: auto;
    }

    .portfolio .container-portfolio-child img {
        width: 285px;
        height: 285px;
        object-fit: cover;
        border-radius: 8px;
    }

    .portfolio .container-close-icone {
        /* background-color: red; */
        width: 90%;
    }
}







.portfolio {
    position: fixed;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.67);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    display: none;
}

.portfolio .container-portfolio-child {
    width: 1100px;
    height: 1000px; 
    display: grid;
    grid-template-rows: repeat(3, 300px);
    grid-template-columns: repeat(3, 300px);
    row-gap: 20px;
    column-gap: 20px;
    justify-content: center;
    align-content: start; 
    overflow-y: auto;
    box-sizing: border-box;
    padding-top: 30px;    
    padding-bottom: 30px;
    max-height: 90vh;     
}


.portfolio .container-portfolio-child::-webkit-scrollbar {
    width: 0px;
    height: 12px;
}

.portfolio .container-portfolio-child div:first-child
{
    grid-column: span 2;
}
.container-portfolio-child div:nth-child(3) {
    grid-row: span 2;
}
.container-portfolio-child div:nth-child(6) {
    grid-column: span 2;
}

.portfolio .container-portfolio-child img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 8px;
}




.portfolio .container-portfolio-child4 {
    width: 1100px;
    height: 1000px; 
    display: grid;
    grid-template-rows: repeat(3, 300px);
    grid-template-columns: repeat(3, 300px);
    row-gap: 20px;
    column-gap: 20px;
    justify-content: center;
    align-content: start;
    overflow-y: auto;
    box-sizing: border-box;
    padding-top: 30px;    
    padding-bottom: 30px;
    max-height: 90vh;     
}


.portfolio .container-portfolio-child4::-webkit-scrollbar {
    width: 0px;
    height: 12px;
}

.portfolio .container-portfolio-child4 div:first-child
{
    grid-column: span 2;
}

.container-portfolio-child4 div:nth-child(1) img{
    object-position: -150% 14%;
    object-fit: cover;
}
.container-portfolio-child4 div:nth-child(2) img{
    object-position: 18% 14%;
    /* object-fit: cover; */
    /* object-fit: cover; */
}
.container-portfolio-child4 div:nth-child(4) img {
    /* grid-row: span 2; */
    object-position: 1% 14%;
}
.container-portfolio-child4 div:nth-child(6) {
    grid-column: span 3;
}

.container-portfolio-child4 div:nth-child(6) img {
    grid-column: span 3;
    object-fit:fill;
}

.portfolio .container-portfolio-child4 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 8px;
}








.portfolio .container-portfolio-child5 {
    width: 1100px;
    height: 1000px; 
    display: grid;
    grid-template-rows: repeat(3, 300px);
    grid-template-columns: repeat(3, 300px);
    row-gap: 20px;
    column-gap: 20px;
    justify-content: center;
    align-content: start;
    overflow-y: auto;
    box-sizing: border-box;
    padding-top: 30px;    
    padding-bottom: 30px;
    max-height: 90vh;     
}


.portfolio .container-portfolio-child5::-webkit-scrollbar {
    width: 0px;
    height: 12px;
}

.portfolio .container-portfolio-child5 div:first-child
{
    grid-column: span 2;
}

.container-portfolio-child5 div:nth-child(1) img{
    object-position: -100% 14%;
}

.container-portfolio-child5 div:nth-child(3)  {
    grid-column: span 3;
}
.container-portfolio-child5 div:nth-child(3) img {
    object-position: 1% 10%;
}
.container-portfolio-child5 div:nth-child(4) 
{
    grid-column: span 3;
}
.container-portfolio-child5 div:nth-child(4) img {
    object-position: 1% 5%;
}


.portfolio .container-portfolio-child5 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 8px;
}






.portfolio .container-portfolio-child3 {
    width: 1100px;
    height: 1000px; 
    display: grid;
    grid-template-rows: repeat(3, 300px);
    grid-template-columns: repeat(3, 300px);
    row-gap: 20px;
    column-gap: 20px;
    justify-content: center;
    align-content: start;
    overflow-y: auto;
    box-sizing: border-box;
    padding-top: 30px;    
    padding-bottom: 30px;
    max-height: 90vh;     
}


.portfolio .container-portfolio-child3::-webkit-scrollbar {
    width: 0px;
    height: 12px;
}

.portfolio .container-portfolio-child3 div:first-child
{
    grid-column: span 2;
}

.container-portfolio-child3 div:nth-child(1) img{
    object-position: -10% 72%;
    object-fit: cover;
}

.container-portfolio-child3 div:nth-child(3)  {
    grid-row: span 2;
    /* grid-row: span 2; */
    /* object-position: 1% 14%; */
}
.container-portfolio-child3 div:nth-child(2) img {
    object-position: 1% 10%;
    object-fit: fill;
}
.container-portfolio-child3 div:nth-child(4) 
{
    grid-column: span 2;
}

.container-portfolio-child3 div:nth-child(6) 
{
    grid-column: span 1;
}



.portfolio .container-portfolio-child3 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 8px;
}




.portfolio .container-close-icone
{
   /* background-color: black; */
   width: 1100px;
   height: 60px;
   color: white;
   font-size: 30px;
}

.portfolio .container-close-icone i
{
    cursor: pointer;
}

@media(max-width: 1130px)
{
    .portfolio .container-portfolio-child {
        width: 1100px;
        display: grid;
        grid-template-rows: repeat(2, 350px);
        grid-template-columns: repeat(2, 350px);;
    
    }
    .portfolio .container-portfolio-child
    {
        width: 98%;
    }
    .portfolio .container-close-icone
    {
        width: 90%;
    }
    .portfolio .container-portfolio-child div:first-child
    {
        grid-column: auto;
    }
    .container-portfolio-child div:nth-child(3) {
        grid-row: auto;
    }
    .container-portfolio-child div:nth-child(6) {
        grid-column: auto;
    }
}

@media(max-width: 850px) {
    .portfolio .container-close-icone {
        padding-top: 15px;
        width: 100%;
    }

    .portfolio .container-portfolio-child {
        width: 100%;
        display: grid;
        grid-template-rows: repeat(2, 300px);
        grid-template-columns: repeat(2, 300px);
        row-gap: 20px;
        column-gap: 20px;
        overflow-y: auto;
        align-content: start;
        padding: 20px 0 50px;
        max-height: 90vh;
        box-sizing: border-box;
    }

    .portfolio .container-portfolio-child div:first-child {
        grid-column: auto;
    }

    .container-portfolio-child div:nth-child(3) {
        grid-row: auto;
    }

    .container-portfolio-child div:nth-child(6) {
        grid-column: auto;
    }

    .portfolio .container-portfolio-child img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 8px;
    }
}


@media(max-width: 650px) {
    .portfolio .container-portfolio-child {
        width: 100%;
        display: grid;
        grid-template-rows: repeat(1, 350px);
        grid-template-columns: repeat(1, 350px);
        row-gap: 20px;
        column-gap: 20px;
        overflow-y: auto;
        align-content: start;
        padding: 20px 0 50px;
        max-height: 90vh;
        box-sizing: border-box;
    }

    .portfolio .container-portfolio-child div:first-child {
        grid-column: auto;
    }

    .container-portfolio-child div:nth-child(3) {
        grid-row: auto;
    }

    .container-portfolio-child div:nth-child(6) {
        grid-column: auto;
    }

    .portfolio .container-portfolio-child img {
        width: 350px;
        height: 350px;
        object-fit: cover;
        border-radius: 8px;
    }

    .portfolio .container-close-icone {
        /* background-color: red; */
        width: 90%;
    }
}


@media(max-width: 385px) {
    .portfolio .container-portfolio-child {
        width: 100%;
        display: grid;
        grid-template-rows: repeat(1, 285px);
        grid-template-columns: repeat(1, 285px);
        row-gap: 20px;
        column-gap: 20px;
        overflow-y: auto;
        align-content: start;
        padding: 20px 0 50px;
        max-height: 90vh;
        box-sizing: border-box;
    }

    .portfolio .container-portfolio-child div:first-child {
        grid-column: auto;
    }

    .container-portfolio-child div:nth-child(3) {
        grid-row: auto;
    }

    .container-portfolio-child div:nth-child(6) {
        grid-column: auto;
    }

    .portfolio .container-portfolio-child img {
        width: 285px;
        height: 285px;
        object-fit: cover;
        border-radius: 8px;
    }

    .portfolio .container-close-icone {
        /* background-color: red; */
        width: 90%;
    }
}









@media(max-width: 1130px)
{
    .portfolio .container-portfolio-child3
    {
        width: 98%;
        grid-template-rows: repeat(2, 350px);
        grid-template-columns: repeat(2, 350px);
    }
    .portfolio .container-close-icone
    {
        width: 90%;
    }
    .portfolio .container-portfolio-child3 div:first-child
    {
        grid-column: span 1;
    }
    .container-portfolio-child3 div:nth-child(3) {
        grid-row: span 1;
    }
    .container-portfolio-child3 div:nth-child(4) {
        grid-row: span 1;
        grid-column: span 1;
    }
    .container-portfolio-child3 div:nth-child(5) {
        grid-row: span 1;
        grid-column: span 1;
    }
    .container-portfolio-child3 div:nth-child(5){
        grid-row: span 1;
        grid-column: span 1;
    }

    .container-portfolio-child3 div:nth-child(5) img{
        width: 350px;
        height: 350px;
    }
    .container-portfolio-child3 div:nth-child(6) {
        grid-row: span 1;
        grid-column: span 1;
    }
    .container-portfolio-child3 div:nth-child(6) img{
        width: 350px;
        height: 350px;
    }
}


@media(max-width: 850px) {

    .portfolio .container-portfolio-child3 {
        width: 100%;
        display: grid;
        grid-template-rows: repeat(2, 300px);
        grid-template-columns: repeat(2, 300px);
        row-gap: 20px;
        column-gap: 20px;
        overflow-y: auto;
        align-content: start;
        padding: 20px 0 50px;
        max-height: 90vh;
        box-sizing: border-box;
    }
}

@media(max-width: 650px) 
{
    .portfolio .container-portfolio-child3 {
        width: 100%;
        display: grid;
        grid-template-rows: repeat(1, 350px);
        grid-template-columns: repeat(1, 350px);
        row-gap: 20px;
        column-gap: 20px;
        overflow-y: auto;
        align-content: start;
        padding: 20px 0 50px;
        max-height: 90vh;
        box-sizing: border-box;
    }
    .portfolio .container-portfolio-child3 img {
        width: 350px;
        height: 350px;
        object-fit: cover;
        border-radius: 8px;
    }
}

@media(max-width: 385px) {
    .portfolio .container-portfolio-child3 {
        width: 100%;
        display: grid;
        grid-template-rows: repeat(1, 285px);
        grid-template-columns: repeat(1, 285px);
        row-gap: 20px;
        column-gap: 20px;
        overflow-y: auto;
        align-content: start;
        padding: 20px 0 50px;
        max-height: 90vh;
        box-sizing: border-box;
    }

    .portfolio .container-portfolio-child3 div:first-child {
        grid-column: auto;
    }

    .portfolio .container-portfolio-child3 img {
        width: 285px;
        height: 285px;
        object-fit: cover;
        border-radius: 8px;
    }
}















/* esscafe */


@media(max-width: 1130px)
{
    .portfolio .container-portfolio-child4
    {
        width: 98%;
        grid-template-rows: repeat(2, 350px);
        grid-template-columns: repeat(2, 350px);
    }
    .portfolio .container-portfolio-child4 div:first-child
    {
        grid-column: span 1;
    }


    .container-portfolio-child4 div:nth-child(1) img{
        object-position: 100% 100%;
        object-fit: cover;
    }
    .container-portfolio-child4 div:nth-child(2) img{
        object-position: 18% 14%;
    }
    .container-portfolio-child4 div:nth-child(4) img {
        object-position: 1% 14%;
    }
    .container-portfolio-child4 div:nth-child(6) {
        grid-column: span 1;
    }
    
    .container-portfolio-child4 div:nth-child(6) img {
        object-fit:cover;
        object-position: 0% 140%;
    }
    
    .portfolio .container-portfolio-child4 img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        border-radius: 8px;
    }
}


@media(max-width: 850px) {

    .portfolio .container-portfolio-child4 {
        width: 100%;
        display: grid;
        grid-template-rows: repeat(2, 300px);
        grid-template-columns: repeat(2, 300px);
        row-gap: 20px;
        column-gap: 20px;
        overflow-y: auto;
        align-content: start;
        padding: 20px 0 50px;
        max-height: 90vh;
        box-sizing: border-box;
    }
}

@media(max-width: 650px) 
{
    .portfolio .container-portfolio-child4 {
        width: 100%;
        display: grid;
        grid-template-rows: repeat(1, 350px);
        grid-template-columns: repeat(1, 350px);
        row-gap: 20px;
        column-gap: 20px;
        overflow-y: auto;
        align-content: start;
        padding: 20px 0 50px;
        max-height: 90vh;
        box-sizing: border-box;
    }
    .portfolio .container-portfolio-child4 img {
        width: 350px;
        height: 350px;
        object-fit: cover;
        border-radius: 8px;
    }
}

@media(max-width: 385px) {
    .portfolio .container-portfolio-child4 {
        width: 100%;
        display: grid;
        grid-template-rows: repeat(1, 285px);
        grid-template-columns: repeat(1, 285px);
        row-gap: 20px;
        column-gap: 20px;
        overflow-y: auto;
        align-content: start;
        padding: 20px 0 50px;
        max-height: 90vh;
        box-sizing: border-box;
    }

    .portfolio .container-portfolio-child4 div:first-child {
        grid-column: auto;
    }

    .portfolio .container-portfolio-child4 img {
        width: 285px;
        height: 285px;
        object-fit: cover;
        border-radius: 8px;
    }
}





/* l'instant */


@media(max-width: 1130px)
{
    .portfolio .container-portfolio-child5
    {
        width: 98%;
        grid-template-rows: repeat(2, 350px);
        grid-template-columns: repeat(2, 350px);
    }
    .portfolio .container-portfolio-child5 div:first-child
    {
        grid-column: span 1;
    }


    .container-portfolio-child5 div:nth-child(1) img{
        object-position: 100% 100%;
        object-fit: cover;
    }
    .container-portfolio-child5 div:nth-child(2){
        grid-row: auto;
        grid-column: auto;
    }
    .container-portfolio-child5 div:nth-child(2) img{
        object-position: 50% 14%;
    }
    .container-portfolio-child5 div:nth-child(4) img {
        object-position: 1% 14%;
    }
    .container-portfolio-child5 div:nth-child(6) {
        grid-column: span 1;
    }
    .container-portfolio-child5 div:nth-child(3) {
        grid-column: span 1;
    }
    
    .container-portfolio-child5 div:nth-child(4) {
        grid-column: span 1;
    }
    
    .portfolio .container-portfolio-child5 img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        border-radius: 8px;
    }
}


@media(max-width: 850px) {

    .portfolio .container-portfolio-child5 {
        width: 100%;
        display: grid;
        grid-template-rows: repeat(2, 300px);
        grid-template-columns: repeat(2, 300px);
        row-gap: 20px;
        column-gap: 20px;
        overflow-y: auto;
        align-content: start;
        padding: 20px 0 50px;
        max-height: 90vh;
        box-sizing: border-box;
    }
}

@media(max-width: 650px) 
{
    .portfolio .container-portfolio-child5 {
        width: 100%;
        display: grid;
        grid-template-rows: repeat(1, 350px);
        grid-template-columns: repeat(1, 350px);
        row-gap: 20px;
        column-gap: 20px;
        overflow-y: auto;
        align-content: start;
        padding: 20px 0 50px;
        max-height: 90vh;
        box-sizing: border-box;
    }
    .portfolio .container-portfolio-child5 img {
        width: 350px;
        height: 350px;
        object-fit: cover;
        border-radius: 8px;
    }
}

@media(max-width: 385px) {
    .portfolio .container-portfolio-child5 {
        width: 100%;
        display: grid;
        grid-template-rows: repeat(1, 285px);
        grid-template-columns: repeat(1, 285px);
        row-gap: 20px;
        column-gap: 20px;
        overflow-y: auto;
        align-content: start;
        padding: 20px 0 50px;
        max-height: 90vh;
        box-sizing: border-box;
    }

    .portfolio .container-portfolio-child5 div:first-child {
        grid-column: auto;
    }

    .portfolio .container-portfolio-child5 img {
        width: 285px;
        height: 285px;
        object-fit: cover;
        border-radius: 8px;
    }
}