/* Laptop styles (1281px and up) */
@media (min-width: 1201px) {

    /* Ensure page-container content stays aligned and scales properly */
    .page-container {
        display: flex;
        flex-direction: column;
        justify-content: flex-start; /* Align content at the top */
        align-items: center; /* Center horizontally */
        width: 100%; /* Use full width of the viewport */
        max-width: 1350px; /* Set max-width for the entire layout */
        height: 100vh; /* Full viewport height */
        padding-top: 0; /* Remove any top padding */
        box-sizing: border-box;
        margin-top: 175px;
        margin-left: auto;
        margin-right: auto; /* Ensure centering within viewport */
        z-index: 2;
    }

    
/* Adjust title-grid to align content properly */
.title-grid {
    width: 100%;
    text-align: center;
    padding: 20px 0;
    background-color: rgba(0, 0, 0, 0.5);
    color: var(--primary-color);
    margin-bottom: 20px;
}

/* Style for h1 in title-grid */
.title-grid h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 48px;
    font-weight: 400;
    color: #a1a1a1;
    margin: 20px 0;
    line-height: 1.2;
}

/* Ensure the video or image inside is scaled properly and centered */
.head-video {
    width: 100%;
    max-width: 100%; /* Ensure it spans the full width of its container */
    box-sizing: border-box; /* Include padding and borders in width */
    display: block; /* Ensures it's treated as a block-level element and stacks properly */
    margin: 0 auto; /* Center the element horizontally */
    padding-top: 0;
}

/* Style the image to ensure it spans full width and maintains aspect ratio */
.head-video img {
    width: 100%; /* Make the image span the full width */
    height: auto; /* Maintain the image's aspect ratio */
    display: block; /* Ensure the image is a block element */
    margin: 0; /* Remove any default margin */
    object-fit: cover; /* Ensure the image covers its container without overflow */
}

    .head-video iframe {
        width: 100%;
        height: 100%;
        aspect-ratio: 16/9; /* Ensures the video maintains a 16:9 aspect ratio */
        max-width: 100%;
        border: none;
        display: block;
        margin: 0 auto; /* Ensures the iframe is centered */
    }


/* Layout for image and text */
.image-text-layout {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    width: 100%;
    margin-top: 20px;
    box-sizing: border-box;
}

.image-container {
    flex: 1;
    margin-right: 10px;
    display: flex;
    align-items: stretch;
}

.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.text-container {
    flex: 2;
    background-color: rgba(0, 0, 0, 0.7); /* Slightly transparent background for contrast */
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.text-container h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 30px;
    font-weight: 400;
    text-align: left;
    color: #f1f1f1; /* Light text color for visibility */
    margin-bottom: 10px;
}

.text-container p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    text-align: left;
    color: #f1f1f1; /* Light text color for visibility */
    margin-bottom: 15px;
    line-height: 1.5;
}

.text-container p.keywords {
    margin-top: 10px;
    font-weight: bold;
    color: #E0D202;
    font-size: 14px;
    letter-spacing: 1px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 200;
    font-style: italic;
}

.new-content-block {
    width: 100%;
    max-width: 1350px;
    margin: 20px auto 0;
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.7); /* Adjusted background for visibility */
    box-sizing: border-box;
    margin-bottom: 20px;
}

.new-content-block h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 30px;
    font-weight: 400;
    text-align: center;
    color: #f1f1f1; /* Light text color for visibility */
    margin-bottom: 10px;
}

.new-content-block p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    text-align: center;
    color: #f1f1f1; /* Light text color for visibility */
    line-height: 1.5;
}

.grid-wrapper {
    width: 100%;
    max-width: 1350px;
    margin: 0 auto;
    box-sizing: border-box;
    margin-bottom: 40px;
}

/* Underline hover effect for all links in the grid-wrapper */
.grid-wrapper a {
    text-decoration: none;
    color: #f1f1f1; /* Light color for visibility */
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    position: relative;
    display: inline-block;
    overflow: hidden;
    transition: color 0.3s ease;
}

/* Create the underline effect using ::before and ::after pseudo-elements */
.grid-wrapper a::before,
.grid-wrapper a::after {
    content: '';
    position: absolute;
    top: 90%; /* Place the line near the bottom of the text */
    height: 2px; /* Thickness of the underline */
    background-color: rgba(161, 161, 161, 0.75); /* Color of the underline */
    width: 0;
    left: 50%; /* Start the line from the center */
    transform: translateX(-50%); /* Center the line horizontally */
    transition: width 0.3s ease-out, transform 0.3s ease-out;
}

.grid-wrapper a:hover::before {
    width: 50%; /* Extend the line to the left when hovered */
    transform: translateX(-100%);
}

.grid-wrapper a:hover::after {
    width: 50%; /* Extend the line to the right when hovered */
    transform: translateX(0);
}

.projects-image-grid {
    display: grid;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: minmax(150px, auto);
    margin-bottom: 120px;
}

.projects-grid-item {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
    cursor: pointer;
}

.projects-grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.project-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    color: #a1a1a1;
    margin-bottom: 10px;
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.view-project-link {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    color: #a1a1a1;
    background-color: #0507128d;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.projects-grid-item.clicked .overlay {
    display: flex;
}

.projects-grid-item.clicked .project-title,
.projects-grid-item.clicked .view-project-link {
    opacity: 1;
}

.view-project-link:hover {
    background-color: #05071253;
}

/* Example grid item spans if needed for more dynamic layouts */
.projects-grid-item-1 {
    grid-column: span 1;
    grid-row: span 1;
}
.projects-grid-item-2 {
    grid-column: span 1;
    grid-row: span 1;
}
.projects-grid-item-3 {
    grid-column: span 1;
    grid-row: span 1;
}
.projects-grid-item-4 {
    grid-column: span 1;
    grid-row: span 1;
}
.projects-grid-item-5 {
    grid-column: span 1;
    grid-row: span 1;
}
.projects-grid-item-6 {
    grid-column: span 1;
    grid-row: span 1;
}
.projects-grid-item-7 {
    grid-column: span 1;
    grid-row: span 1;
}
.projects-grid-item-8 {
    grid-column: span 1;
    grid-row: span 1;
}
/* Ensure grid wrapper takes full width and centers the content */
.grid-wrapper11 {
    width: 100%;
    max-width: 1350px;
    margin: 0 auto;
    box-sizing: border-box;
    margin-bottom: 20px;
}

/* Grid layout for images and videos */
.projects-image-grid11 {
    display: grid;
    gap: 10px;
    width: 100%;
    grid-template-columns: repeat(2, 1fr); /* Two equal-width columns */
    grid-auto-rows: minmax(150px, auto);
    margin-bottom: 140px;
}

/* Grid item styling for images and videos */
.projects-grid-item11 {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
}

/* Specific container for AI Plugin videos */
.projects-grid-item-AIPlug1, 
.projects-grid-item-AIPlug2 {
    grid-column: span 2; /* Make these span across both columns, same as images */
    width: 100%;
    display: block;
}

/* Specific container for videos */
.video-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* Maintain 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
}

/* Ensure iframe (video) takes full width of the container */
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/*VARIATION ON LOCAL VIDEOS*/
/* Ensure the video container takes full width and maintains aspect ratio */
.video-container1 {
    width: 100%;
    height: auto;
    position: relative;
    box-sizing: border-box;
}

/* Ensure the video scales properly and fits within the container without cropping */
.video-container1 video {
    width: 100%; /* Full width of the container */
    height: auto; /* Maintain aspect ratio */
    display: block;
    max-width: 100%; /* Ensure the video does not exceed the container's width */
    object-fit: contain; /* Prevent cropping, fit the video within the container */
    margin: 0;
    border: none;
}



/* Image styling */
.projects-grid-item11 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    max-width: 100%;
}
/* SINGLE COLUMN ELEMENTS NEO-EPCOT */

.grid-wrapper11 {
    width: 100%; /* Full width of the container */
    max-width: 1350px; /* Max width of the container */
    margin: 0 auto; /* Center the container */
    box-sizing: border-box; /* Include padding and borders in the width */
    margin-bottom: 40px; /* Space below the container */
}

.projects-image-grid11 {
    display: grid; /* Use grid layout */
    gap: 10px; /* Space between grid items */
    width: 100%; /* Full width of the grid */
    box-sizing: border-box; /* Include padding in width */
    grid-template-columns: repeat(2, 1fr); /* Two equal-width columns */
    grid-auto-rows: minmax(150px, auto); /* Row heights are flexible but not smaller than 150px */
    margin-bottom: 140px; /* Space below the grid */
}

.projects-image-grid111 {
    display: grid; /* Use grid layout */
    gap: 10px; /* Space between grid items */
    width: 100%; /* Full width of the grid */
    box-sizing: border-box; /* Include padding in width */
    grid-template-columns: repeat(2, 1fr); /* Two equal-width columns */
    grid-auto-rows: minmax(150px, auto); /* Row heights are flexible but not smaller than 150px */
    margin-bottom: 140px; /* Space below the grid */
}

.projects-grid-item11 {
    position: relative; /* Positioned relative to its container */
    width: 100%; /* Full width of the grid item */
    height: auto; /* Let the height adjust automatically */
    overflow: hidden; /* Hide any overflow */
    cursor: pointer; /* Cursor changes to pointer when hovered */
}

.projects-grid-item11 img {
    width: 100%; /* Image takes full width of its container */
    height: 100%; /* Image height is relative to container */
    object-fit: cover; /* Image covers container while maintaining aspect ratio */
    display: block; /* Ensures the image is displayed as a block */
}

.projects-grid-item12 img {
    width: 100%; /* Image takes full width of its container */
    height: 100%; /* Image height is relative to container */
    object-fit: cover; /* Image covers container while maintaining aspect ratio */
    display: block; /* Ensures the image is displayed as a block */
}

.projects-grid-item111 img {
    width: 100%; /* Image takes full width of its container */
    height: 100%; /* Image height is relative to container */
    object-fit: cover; /* Image covers container while maintaining aspect ratio */
    display: block; /* Ensures the image is displayed as a block */
}

.projects-image-gridresult {
    display: grid; /* Use grid layout */
    gap: 10px; /* Space between grid items */
    width: 100%; /* Full width of the grid */
    box-sizing: border-box; /* Include padding in width */
    grid-template-columns: repeat(4, 1fr); /* Two equal-width columns */
    grid-auto-rows: minmax(150px, auto); /* Row heights are flexible but not smaller than 150px */
    margin-bottom: 140px; /* Space below the grid */
}

.projects-grid-itemresult img {
    width: 100%; /* Image takes full width of its container */
    height: 100%; /* Image height is relative to container */
    object-fit: cover; /* Image covers container while maintaining aspect ratio */
    display: block; /* Ensures the image is displayed as a block */
}

.projects-image-grid-os {
    display: grid; /* Use grid layout */
    gap: 10px; /* Space between grid items */
    width: 100%; /* Full width of the grid */
    box-sizing: border-box; /* Include padding in width */
    grid-template-columns: repeat(3, 1fr); /* Two equal-width columns */
    grid-auto-rows: minmax(150px, auto); /* Row heights are flexible but not smaller than 150px */
    margin-bottom: 140px; /* Space below the grid */
}

.projects-grid-item-os img {
    width: 100%; /* Image takes full width of its container */
    height: 100%; /* Image height is relative to container */
    object-fit: cover; /* Image covers container while maintaining aspect ratio */
    display: block; /* Ensures the image is displayed as a block */
}

/* Example grid item spans if needed for more dynamic layouts */
.projects-grid-item-1110 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-11100 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-112 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-113 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-114 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-115 {
    grid-column: span 2;
    grid-row: span 1;
}

.projects-grid-item-116 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-117 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-118 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-119 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-120 {
    grid-column: span 2;
    grid-row: span 1;
}

/* Example grid item spans if needed for more dynamic layouts */
.projects-grid-item-dsync1 {
    grid-column: span 2;
    grid-row: span 1;
    margin-bottom: 20px;
}

.projects-grid-item-dsync2 {
    grid-column: span 2;
    grid-row: span 2;
    margin-bottom: 20px;
}

.projects-grid-item-dsync3 {
    grid-column: span 2;
    grid-row: span 1;
    margin-bottom: 20px;
}

.projects-grid-item-dsync4 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-dsync5 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-dsync6 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-dsync7 {
    grid-column: span 1;
    grid-row: span 1;
}
/* -------------SOMNAREEM---------------- */
.projects-grid-item-SR1 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-SR2 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-SR3 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-SR4 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-SR5 {
    grid-column: span 2;
    grid-row: span 2;
}
/* -------------PLANET GARDEN v.3---------------- */
.projects-grid-item-PGv31 {
    grid-column: span 2;
    grid-row: span 2;
}

.projects-grid-item-PGv32 {
    grid-column: span 2;
    grid-row: span 2;
}

.projects-grid-item-PGv33 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-PGv34 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-PGv35 {
    grid-column: span 2;
    grid-row: span 2;
}

.projects-grid-item-PGv36 {
    grid-column: span 2;
    grid-row: span 2;
}
/* -------------PERSONA3 V.3---------------- */
.projects-grid-item-P3Trd1 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-P3Trd2 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-P3Trd3 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-P3Trd4 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-P3Trd5 {
    grid-column: span 1;
    grid-row: span 2;
}

.projects-grid-item-P3Trd6 {
    grid-column: span 1;
    grid-row: span 2;
}

.projects-grid-item-P3Trd7 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-P3Trd8 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-P3Trd9 {
    grid-column: span 2;
    grid-row: span 2;
}

.projects-grid-item-P3Trd10 {
    grid-column: span 2;
    grid-row: span 2;
}

/* -------------PERSONA3 ENVIRONMENTS---------------- */
.projects-grid-item-P3Env1 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-P3Env2 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-P3Env3 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-P3Env4 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-P3Env5 {
    grid-column: span 2;
    grid-row: span 2;
}

/* -------------TEKKEN8-LIVE STREAM---------------- */
.projects-grid-item-TekLiv1 {
    grid-column: span 2;
    grid-row: span 2;
}

.projects-grid-item-TekLiv2 {
    grid-column: span 2;
    grid-row: span 2;
}

.projects-grid-item-TekLiv3 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-TekLiv4 {
    grid-column: span 1;
    grid-row: span 1;
}

/* -------------TEKKEN8-The Story So Far---------------- */
.projects-grid-item-TekTSSF1 {
    grid-column: span 2;
    grid-row: span 2;
}

.projects-grid-item-TekTSSF2 {
    grid-column: span 2;
    grid-row: span 2;
}

.projects-grid-item-TekTSSF3 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-TekTSSF4 {
    grid-column: span 1;
    grid-row: span 1;
}

/* -------------CAJON PASS---------------- */
.projects-grid-item-CP1 {
    grid-column: span 2;
    grid-row: span 2;
}

.projects-grid-item-CP2 {
    grid-column: span 2;
    grid-row: span 1;
}

.projects-grid-item-CP3 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-CP4 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-CP5 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-CP6 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-CP7 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-CP8 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-CP9 {
    grid-column: span 2;
    grid-row: span 2;
}

.projects-grid-item-CP10 {
    grid-column: span 2;
    grid-row: span 2;
}

/* -------------PlanetGarden-Wiki---------------- */
.projects-grid-item-PGWiki1 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-PGWiki2 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-PGWiki3 {
    grid-column: span 2;
    grid-row: span 2;
}

.projects-grid-item-PGWiki4 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-PGWiki5 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-PGWiki6 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-PGWiki7 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-PGWiki8 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-PGWiki9 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-PGWiki10 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-PGWiki11 {
    grid-column: span 1;
    grid-row: span 1;
}

/* -------------Pro-Futures---------------- */
.projects-grid-item-PF1 {
    grid-column: span 2;
    grid-row: span 1;
}

.projects-grid-item-PF2 {
    grid-column: span 2;
    grid-row: span 1;
}

.projects-grid-item-PF3 {
    grid-column: span 2;
    grid-row: span 1;
}

.projects-grid-item-PF4 {
    grid-column: span 2;
    grid-row: span 1;
}

.projects-grid-item-PF5 {
    grid-column: span 2;
    grid-row: span 2;
}

.projects-grid-item-PF6 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-PF7 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-PF8 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-PF9 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-PFYT {
    grid-column: span 2;
    grid-row: span 1;
}

/* -------------PLANET GARDEN ZINE---------------- */
.projects-grid-item-PGZine1 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-PGZine2 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-PGZine3 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-PGZine4 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-PGZine5 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-PGZine6 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-PGZine7 {
    grid-column: span 2;
    grid-row: span 1;
}

.projects-grid-item-PGZine8 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-PGZine9 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-PGZine10 {
    grid-column: span 2;
    grid-row: span 1;
}

.projects-grid-item-PGZine11 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-PGZine12 {
    grid-column: span 1;
    grid-row: span 1;
}

/* -------------PLANET GARDEN GAIA---------------- */
.projects-grid-item-PGGAIA1 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-PGGAIA2 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-PGGAIA3 {
    grid-column: span 2;
    grid-row: span 1;
}

.projects-grid-item-PGGAIA4 {
    grid-column: span 2;
    grid-row: span 1;
}

.projects-grid-item-PGGAIA5 {
    grid-column: span 2;
    grid-row: span 1;
}

.projects-grid-item-PGGAIA6 {
    grid-column: span 2;
    grid-row: span 1;
}

.projects-grid-item-PGGAIA7 {
    grid-column: span 2;
    grid-row: span 1;
}

.projects-grid-item-PGGAIA8 {
    grid-column: span 2;
    grid-row: span 1;
}

.projects-grid-item-PGGAIA9 {
    grid-column: span 2;
    grid-row: span 1;
}

.projects-grid-item-PGGAIA10 {
    grid-column: span 2;
    grid-row: span 1;
}

.projects-grid-item-PGGAIA11 {
    grid-column: span 2;
    grid-row: span 1;
}

.projects-grid-item-PGGAIA12 {
    grid-column: span 2;
    grid-row: span 1;
}

.projects-grid-item-PGGAIA13 {
    grid-column: span 2;
    grid-row: span 1;
}

.projects-grid-item-PGGAIA14 {
    grid-column: span 2;
    grid-row: span 1;
}

.projects-grid-item-PGGAIA15 {
    grid-column: span 2;
    grid-row: span 1;
}

/* -------------Love's Wave---------------- */

.projects-grid-item-LW_VID {
    grid-column: span 2;
    grid-row: span 1;
}

.projects-grid-item-LW0 {
    grid-column: span 2;
    grid-row: span 1;
}

.projects-grid-item-LW1 {
    grid-column: span 2;
    grid-row: span 1;
}

.projects-grid-item-LW2 {
    grid-column: span 2;
    grid-row: span 1;
}

.projects-grid-item-LW3 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-LW4 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-LW5 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-LW6 {
    grid-column: span 1;
    grid-row: span 1;
}

/* -------------Contingent---------------- */

.projects-grid-item-Conn10 {
    grid-column: span 2;
    grid-row: span 1;
}

.projects-grid-item-LW_VID {
    grid-column: span 2;
    grid-row: span 1;
}

.projects-grid-item-Conn11 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-Conn22 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-Conn33 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-Conn44 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-Con1 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-Con2 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-Con3 {
    grid-column: span 1;
    grid-row: span 1;
}
.projects-grid-item-Con4 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-25_1 {
    grid-column: span 2;
    grid-row: span 1;
}

.projects-grid-item-25_2 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-25_3 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-25_4 {
    grid-column: span 2;
    grid-row: span 2;
}

/* -------------AI-Photobooth---------------- */
.projects-grid-item-aipb_1 {
    grid-column: span 2;
    grid-row: span 1;
}

.projects-grid-item-aipb_2 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-aipb_3 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-aipb_4 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-aipb_5 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-aipb_6 {
    grid-column: span 2;
    grid-row: span 2;
}

.projects-grid-item-gr_1 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-gr_2 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-gr_3 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-gr_4 {
    grid-column: span 1;
    grid-row: span 1;
}

/* ---------------- OKIE5 + SEED ----------------- */
.projects-grid-item-os1 {
    grid-column: span 3;
    grid-row: span 2;
}

.projects-grid-item-os2 {
    grid-column: span 3;
    grid-row: span 3;
}

.projects-grid-item-os3 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-os4 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-os5 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-os6 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-os7 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-os8 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-os9 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-os10 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-os11 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-os12 {
    grid-column: span 3;
    grid-row: span 3;
}

.projects-grid-item-os13 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-os14 {
    grid-column: span 1;
    grid-row: span 1;
}

.projects-grid-item-os15 {
    grid-column: span 1;
    grid-row: span 1;
}

.grid-wrapperCajon {
    width: 100%;
    max-width: 1350px;
    margin: 0 auto;
    box-sizing: border-box;
    margin-bottom: 20px;
}

.projects-image-gridCajon {
    display: grid;
    gap: 10px;
    width: 100%;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: minmax(150px, auto);
    margin-bottom: 140px;
}

/* Ensure the video container takes up both columns */
.video-container {
    grid-column: span 2;
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
}

/* Style for the embedded YouTube iframe */
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    object-fit: cover;
}

.projects-grid-itemCajon {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
    cursor: pointer;
}

.projects-grid-itemCajon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    max-width: 100%;
}



.local-video-container {
    width: 100%; /* Full width of the page */
    max-width: 100vw; /* Ensures the video does not exceed the viewport width */
    height: auto; /* Maintain aspect ratio */
    margin: 0; /* Flush with all elements on the page */
    padding: 0; /* No extra padding */
    box-sizing: border-box; /* Include padding and borders in the width */
}

.local-video-container video {
    width: 100%; /* Full width of the container */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Make the video a block element */
    object-fit: cover; /* Ensure the video covers the container without cropping */
    margin: 0 auto; /* Center the video */
    border: none; /* No border */
}

.video-container1 {
    width: 100%;
    padding-top: 100%; /* Ensures a square aspect ratio */
    position: relative;
    overflow: hidden;
}

.video-container1 video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: 100%;
    transform: translate(-50%, -50%);
    object-fit: cover; /* Crops the sides if the video is too wide */
}


/* Centered Heading Styling */
.heading-container {
    grid-column: span 2; /* Span across both columns */
    width: 100%; /* Full width */
    background-color: rgba(0, 0, 0, 0.5); /* Transparent black background */
    display: flex; /* Use flexbox for centering */
    align-items: center; /* Vertical centering */
    justify-content: center; /* Horizontal centering */
    padding: 10px 0; /* Space around the text */
    margin: 10px 0; /* Margins to add space around the heading */
}

.centered-heading {
    font-family: 'Montserrat', sans-serif; /* Font */
    font-size: 48px; /* Font size */
    font-weight: 400; /* Font weight */
    color: #E0D202; /* Text color */
    margin: 0; /* Remove default margins */
    line-height: 1.5; /* Line height for readability */
    text-align: center; /* Ensure text is centered within the flex container */
}

/* Credits block styling */
.credits {
    width: 100%; /* Full width of the container */
    max-width: 1350px; /* Same as the grid */
    margin: auto; /* 20px top and bottom margin, centered horizontally */
    margin-top: 10px;
    box-sizing: border-box; /* Ensure padding and borders are within width calculations */
    padding: 0; /* No extra padding */
    text-align: center; /* Center the image within the container */
    margin-bottom: 20px;
}

/* Styling for the credits image */
.credits-img {
    width: 100%; /* Make the image take up the full width of the container */
    height: auto; /* Maintain aspect ratio */
    object-fit: contain; /* Ensure the image scales down to fit the container */
    display: block;
    max-width: 100vw; /* Ensure the image does not exceed the viewport width */
    margin: 0 auto; /* Center the image */
    box-sizing: border-box;
}

.project-video11 {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Ensure the full video is visible without cropping */
    display: block;
}

}