*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.main-content{
  padding: 10%;
  height: 200vh;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  grid-template-areas: "portfolio portfolio portfolio  portfolio";
 
}
.portfolio{
    grid-area: portfolio;
}
.portfolio{
    display: grid;
    height: 100%;
    grid-template-rows:repeat(auto) ;
    grid-template-columns:repeat(5, 1fr) ;
    gap: 20px;

}
.portfolio-item{
    display: flex;
    justify-content: center;
    align-items: center; 
    background-position: center;
    object-fit: cover;
    object-position: center;
    background-size: cover;
    transition: opacity 0.8s ease, transform 0.8s ease;
    opacity: 1;
    will-change: opacity, transform;
  
}

.fade-out {
  opacity: 0;
  transform: scale(1.06);
}

.fade-in {
  opacity: 1;
  transform: scale(1);
}



.portfolio-item.small{
    grid-row:span 1 ;
    grid-column:span 1 ;
}
.portfolio-item.medium{
   
    grid-row: span 2;
    grid-column: span 2;
}
.portfolio-item.large{
    grid-row:span 3 ;
    grid-column:span 3 ;
}
.portfolio-item.tall{
    grid-row: span 3;
    grid-column:span 2 ;
}
.portfolio-item.wide{
    grid-row:span 2 ;
    grid-column:span 3 ;
}


/* =========================================================================================================== */
@media(max-width:768px) {
    .main-content{
        padding: 5%;
        height: 200vh;
    }

    .portfolio{
        grid-template-columns: repeat(5,1fr);
        grid-template-rows: auto;
    }
    .portfolio-item.small{
        grid-column: span 5;
    }
    .portfolio-item.medium{
        grid-column: span 5;
    }
    .portfolio-item.large{
        grid-column: span 5;
    }
    .portfolio-item.tall{
        grid-column: span 5;
    }
    .portfolio-item.wide{
        grid-column: span 5;
    }
    
}
/* =========================================================================================================== */