.project-body {
    display: flex;
    flex-direction: column;
    position:relative;
    /* align-items: center; */
    /* justify-content: center; */
    
    width: 100vw;
    max-width: 1280px;
}
.project-content {
    display: flex;
    flex-direction: column;
    padding: 6rem 2rem 0 2rem;
}
.project-header {
    margin: 2rem 0 0 0;   
}
.project-name {
    line-height:5.2rem;
}

.project-type {
    color: var(--light-text-color);
    margin-top: 1rem;
}
.project-hero {
    margin-top: 4rem;
}
.project-hero a {
    display: flex;
}
.long-text {
    margin: 2rem 0 0 0;
    font-size: 1.4rem;
    max-width: 800px;
}
.project-quote {
    display: flex;
    font-weight: 500;
    line-height: 2.6rem;
    /* width: 40vw; */
    /* align-items: end; */
    align-self: flex-end;
    min-width: 300px;
    max-width: 560px;
    margin: 6rem 2rem 0;
}
.project-quote blockquote, .project-quote span {
    font-size: 2rem;
    text-align: left;
}
.project-navigation {
    display: flex;
    margin-top: 12vh;
    flex-direction: row;
    justify-content: space-between;
}
.project-nav-thumbnail {
    width: 16rem;
    height: 8rem;
    max-width: 36vw;
    max-height: 12vh;
    object-fit: cover;
}

.project-hero video, .project-hero img{
    /* display: flex; */
    width: 100%;
    margin-left: 0;
    height: auto;
    background-color: rgb(231, 231, 231);
}
.project-hero video{
    max-height: 80vh;
}
/* video play button */
.video-container {
    position: relative;
    display: inline-block;
}
.video-element {
    width: 100%;
    display: block;
}
.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.play-button::after {
    content: '▶';
    padding-left: 0.3rem;
    font-size: 30px;
}








.project-image-grid {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 6rem;
}
/* CSS for the grid container */
/* .grid-3-landscape  {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    grid-gap: 8px; 
    width: 100%; 
} */
/* .grid-4-auto, .grid-4-square {
    display: grid;
    
    grid-template-columns: repeat(4,1fr); 
    grid-auto-rows: 1fr;
    gap: 8px;
} */
.grid {
    display: grid;
    /* grid-template-columns: auto auto auto auto; */
    /* grid-template-rows: repeat(3, 20vh); */
    gap: 8px;
}
.three-columns {
    grid-template-columns: auto auto auto; 
}
.four-columns {
    grid-template-columns: auto auto auto auto; 
} 

.grid-item a{
    /* display: flex; */

    position: relative;
    width: 100%;
    overflow: hidden;
    /* object-fit: cover; */
}
.two-columns-wide {
    grid-column: span 2;
}

.fit-scale-down a img{
    object-fit: scale-down;
}
/* .two-span-end {
    grid-column: 2 / 4;
    grid-row: 1/3;
} */
.two-rows-tall {
    grid-row: span 2;
}
.column-start-3 {
    grid-row-start: 2;
}
/* CSS for images within grid items */
.grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block; /* Remove extra space below images */
}







.project-video {
    margin-top: 2rem;
    position: relative;
    overflow: hidden;
    /* padding-top: 56.25%; */
}

.project-video iframe {
    width: 100%; /* Adjust the width as needed */
    height: auto; /* This maintains the aspect ratio */
    aspect-ratio: 16 / 9; /* Maintains a 16:9 aspect ratio */
}

.project-media-caption {
    /* margin-bottom: 2rem; */
    color: var(--light-text-color);
}






@media screen and (max-width: 768px) {
    .project-header h1{
        line-height: 5.2rem;
    }
    .project-content {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .three-columns{
        grid-template-columns: auto auto;
    }
    .two-columns-wide {
        
        grid-column: auto;
    }
    .two-rows-tall {
        
        grid-row: 2 span;
    }

    /* .square, .landscape, .portrait {
        grid-template-columns: repeat(2, 1fr); 
    }
    
    .two-span {
        grid-column: 2 span;
        grid-row: 1 span;
    }
    .two-span-end {
        grid-column: 1 span;
        grid-row: 1/1 span;
    } */
    .row-start-2-mobile{
grid-row-start: 2;
    }
}