/* PortfolioItem Grid */
.portfolioitem-grid-1image,
.portfolioitem-grid-2image,
.portfolioitem-grid-3image,
.portfolioitem-grid-4image {
    display: grid;
    grid-template-rows: fit-content();
    gap: 25px;
    margin-bottom: 50px;
}

.portfolioitem-grid-1image {
    grid-template-columns: 1fr
}

.portfolioitem-grid-2image {
    grid-template-columns: repeat(2, 1fr);
}

.portfolioitem-grid-3image,
.portfolioitem-grid-4image {
    grid-template-columns: repeat(6, 1fr);
}

/* PortfolioItem - one image, Top, Wide */
.main-1image-tw {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* PortfolioItem - one image, Bottom right */
.main-1image-br {
    width: 100%;
    height: 100%;
    object-fit: cover;
    grid-row-start: 2;
}

.text-content-1image-br {
   grid-row-start: 1;
}

/* PortfolioItem - Two image, Top, Wide */
.main-2image-tw,
.second-2image-tw {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.text-content-2image-tw {
   grid-column: span 2 / span 2;
}

/* PortfolioItem - Two image, Top, Left */
.main-2image-tl,
.second-2image-tl {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.text-content-2image-tl {
   grid-column: span 2 / span 2;
}

/* PortfolioItem - Two image, Bottom right */
.main-2image-br,
.second-2image-br {
    width: 100%;
    height: 100%;
    object-fit: cover;
    grid-row-start: 2;
}

.text-content-2image-br {
   grid-column: span 2 / span 2;
   grid-column-start: 1;
   grid-row-start: 1;
}

/* PortfolioItem - Three image, Top, Wide */
.main-3image-tw {
    grid-column: span 6 / span 6;
}

.second-3image-tw,
.third-3image-tw,
.text-content-3image-tw {
    grid-column: span 2 / span 2;
    grid-row-start: 2;
}

.main-3image-tw img,
.second-3image-tw img,
.third-3image-tw img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 768px) {
    .second-3image-tw {
        grid-column: span 3 / span 3;
        grid-row-start: 2;
    }
    
    .third-3image-tw {
        grid-column: span 3 / span 3;
        grid-column-start: 4;
        grid-row-start: 2;
    }
    
    .text-content-3image-tw {
        grid-column: span 6 / span 6;
        grid-row-start: 3;
    }
}

/* PortfolioItem - Three image, Bottom right */
.main-3image-br {
    grid-column: span 4 / span 4;
    grid-row: span 2 / span 2;
    grid-column-start: 3;
    grid-row-start: 2;
}

.second-3image-br {
    grid-column: span 2 / span 2;
    grid-row: span 2 / span 2;
}

.text-content-3image-br {
    grid-column: span 4 / span 4;
    grid-column-start: 3;
    grid-row-start: 1;
}

.main-3image-br img,
.second-3image-br img,
.third-3image-br img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.third-3image-br {
    grid-column: span 2 / span 2;
    grid-column-start: 1;
    grid-row-start: 3;
}

@media (max-width: 768px) {
    .main-3image-br {
        grid-column: span 4 / span 4;
        grid-row: span 3 / span 3;
        grid-column-start: 3;
        grid-row-start: 2;
    }
    
    .second-3image-br {
        grid-column: span 2 / span 2;
        grid-row: span 2 / span 2;
        grid-column-start: 1;
        grid-row-start: 2;
    }
 
     .third-3image-br {
        grid-column: span 2 / span 2;
        grid-column-start: 1;
        grid-row-start: 4;
    }
   
    .text-content-3image-br {
        grid-column: span 6 / span 6;
        grid-column-start: 1;
        grid-row-start: 1;
    }
}

/* PortfolioItem - Three image, Top Left */
.main-3image-tl {
    grid-column: span 4 / span 4;
    grid-row: span 2 / span 2;
}

.second-3image-tl {
    grid-column: span 2 / span 2;
    grid-column-start: 5;
}

.third-3image-tl {
    grid-column: span 2 / span 2;
    grid-row: span 2 / span 2;
    grid-column-start: 5;
    grid-row-start: 2;
}

.text-content-3image-tl {
    grid-column: span 4 / span 4;
    grid-row-start: 3;
}

.main-3image-tl img,
.second-3image-tl img,
.third-3image-tl img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 768px) {
    .main-3image-tl {
        grid-column: span 4 / span 4;
        grid-row: span 3 / span 3;
    }
    
    .second-3image-tl {
        grid-column: span 2 / span 2;
        grid-column-start: 5;
    }
    
    .third-3image-tl {
        grid-column: span 2 / span 2;
        grid-row: span 2 / span 2;
        grid-column-start: 5;
        grid-row-start: 2;
    }
    
    .text-content-3image-tl {
        grid-column: span 6 / span 6;
        grid-row-start: 4;
    }    
}

/* PortfolioItem - Four image, Top, Wide */
.main-4image-tw {
    grid-column: span 6 / span 6;
}

.second-4image-tw {
    grid-column: span 3 / span 3;
    grid-row-start: 2;
}

.third-4image-tw {
    grid-column: span 3 / span 3;
    grid-column-start: 4;
    grid-row-start: 2;
}

.fourth-4image-tw {
    grid-column: span 2 / span 2;
    grid-row-start: 3;
}

.text-content-4image-tw {
    grid-column: span 4 / span 4;
    grid-column-start: 3;
    grid-row-start: 3;
}

@media (max-width: 768px) {
    .main-4image-tw {
        grid-column: span 6 / span 6;
    }
    
    .second-4image-tw {
        grid-column: span 3 / span 3;
        grid-row-start: 2;
    }
    
    .third-4image-tw {
        grid-column: span 3 / span 3;
        grid-column-start: 4;
        grid-row-start: 2;
    }
    
    .fourth-4image-tw {
        grid-column: span 6 / span 6;
        grid-row-start: 3;
    }
    
    .text-content-4image-tw {
        grid-column: span 6 / span 6;
        grid-row-start: 4;
    }
}

/* PortfolioItem - Four image, Bottom right */
.main-4image-br {
    grid-column: span 4 / span 4;
    grid-row: span 2 / span 2;
    grid-column-start: 3;
    grid-row-start: 2;
}

.second-4image-br {
    grid-column: span 2 / span 2;
    grid-row: span 2 / span 2;
    grid-column-start: 1;
    grid-row-start: 1;
}

.main-4image-br img,
.second-4image-br img,
.third-4image-br img,
.fourth-4image-br img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.third-4image-br {
    grid-column: span 2 / span 2;
    grid-column-start: 3;
    grid-row-start: 1;
}

.fourth-4image-br {
    grid-column: span 2 / span 2;
    grid-column-start: 5;
    grid-row-start: 1;
}

.text-content-4image-br {
    grid-column: span 2 / span 2;
    grid-row-start: 3;
}

@media (max-width: 768px) {
    .main-4image-br {
        grid-column: span 4 / span 4;
        grid-row: span 2 / span 2;
        grid-column-start: 3;
        grid-row-start: 3;
    }
    
    .second-4image-br {
        grid-column: span 2 / span 2;
        grid-row: span 4 / span 4;
        grid-column-start: 1;
        grid-row-start: 1;
    }
    
    .third-4image-br {
        grid-column: span 2 / span 2;
        grid-row: span 2 / span 2;
        grid-column-start: 3;
        grid-row-start: 1;
    }
    
    .fourth-4image-br {
        grid-column: span 2 / span 2;
        grid-row: span 2 / span 2;
        grid-column-start: 5;
        grid-row-start: 1;
    }
    
    .text-content-4image-br {
        grid-column: span 6 / span 6;
        grid-row-start: 5;
    }
}

/* PortfolioItem - Four image, Top Left */
.main-4image-tl {
    grid-column: span 4 / span 4;
    grid-row: span 4 / span 4;
}

.second-4image-tl {
    grid-column: span 2 / span 2;
    grid-row: span 3 / span 3;
    grid-column-start: 5;
}

.third-4image-tl {
    grid-column: span 2 / span 2;
    grid-row: span 3 / span 3;
    grid-column-start: 5;
    grid-row-start: 4;
}

.main-4image-tl img,
.second-4image-tl img,
.third-4image-tl img,
.fourth-4image-tl img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fourth-4image-tl {
    grid-column: span 2 / span 2;
    grid-row: span 2 / span 2;
    grid-column-start: 3;
    grid-row-start: 5;
}

.text-content-4image-tl {
    grid-column: span 2 / span 2;
    grid-row: span 2 / span 2;
    grid-column-start: 1;
    grid-row-start: 5;
}

@media (max-width: 768px) {
    .main-4image-tl {
        grid-column: span 4 / span 4;
        grid-row: span 4 / span 4;
    }
    
    .second-4image-tl {
        grid-column: span 2 / span 2;
        grid-row: span 3 / span 3;
        grid-column-start: 5;
    }
    
    .third-4image-tl {
        grid-column: span 2 / span 2;
        grid-row: span 3 / span 3;
        grid-column-start: 5;
        grid-row-start: 4;
    }
    
    .fourth-4image-tl {
        grid-column: span 4 / span 4;
        grid-row: span 2 / span 2;
        grid-row-start: 5;
    }
    
    .text-content-4image-tl {
        grid-column: span 6 / span 6;
        grid-row-start: 7;
    }
}

/* PortfolioItem - General */
.portfolioItem-title {
    font-size: 1.5em; 
    padding-bottom: 15px;
}

@media (max-width: 768px) {
    .portfolioitem-grid-1image,
    .portfolioitem-grid-2image,
    .portfolioitem-grid-3image,
    .portfolioitem-grid-4image {
        gap: 15px;
        margin-bottom: 25px;
    }

    .portfolioItem-title {
        font-size: 1.2em; 
        padding-bottom: 15px;
    }
    
    .portfolioItem-text p {
        font-size: 0.9em; 
    }
}