/* Projects banner */
.projects-headline-banner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.projects-headline-banner .spacer-vertical {
    height: 2.5vw;
    min-height: 20px;
    max-height: 50px;
}

/* Flexbox for variable spacing on sides */
.spacer-side-flexbox {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.spacer-sides {
    flex: 1;
}

/* PROJECTS FILTER */
.portfolio-filter-container {
    margin-bottom: 12px;
}

.filter-list {
    flex: 12;
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    
    justify-content: center;
    align-items: center;
}

.filter-button {
    margin: 0.5rem 2.5rem;
    cursor: pointer;
    font-size: 16px;
    letter-spacing: 2px;
    color: #333333; 
    border-bottom: 1px solid transparent;
    transition: all 0.25s;
}
.filter-button:hover {
    opacity: 0.75;
    border-bottom: 1px solid rgba(51, 51, 51, 0.75);
}

.filter-list .current-filter {
    color: rgb(192, 24, 24);
}
.filter-list .current-filter:hover {
    border-bottom: 1px solid rgba(192, 24, 24, 0.75);
}

@media (max-width: 69em) {
    .filter-list {
        flex: 18;
    }
}

@media (max-width: 45em) {

    .filter-list {
        flex: 22;
    }
}


/* PROJECTS GRID */
.portfolio-container-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 16px;
    row-gap: 16px;
    flex: 12;
    max-width: 2000px;
    margin-bottom: 60px;
    list-style: none;
}

.project-tile-container {
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: lightgray;
    position: relative; 
    /* animation: scale-in 0.25s; */
}

/* @keyframes scale-in {
    from {transform:scale(0%)}
    to  {transform:scale(100%); display: block;}
} */



.project-tile-image {
    max-width: 100%;
    position: absolute;
}

.project-title-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    
    background-color: rgba(0, 0, 0, 0.8);
    opacity: 0;
    transition: opacity 0.4s; 
}

.project-tile-container:hover .project-title-overlay{
    opacity: 1;
}

.project-title {
    padding: 10% 10%;
    color: #eaeaea;
    font-size: 1.4rem;
    font-family: Roboto, Arial;
    text-align: center;
}

/* Game Audio Reel section */

.audio-reel-container {
    background-color: #eaeaea;
}

/* Game Audio Reel banner */
.audio-reel-headline-banner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.audio-reel-headline-banner .spacer-vertical {
    height: 2.5vw;
    min-height: 20px;
    max-height: 50px;
}

.iframe-container {
    flex: 3;
    max-width: 2000px;
    margin-bottom: 60px;
}

.iframe-container iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
}


@media (max-width: 69em) {

    .portfolio-container-grid {
        grid-template-columns: 1fr 1fr;
        flex: 18;
    }

    .iframe-container {
        flex: 12;
    }
}

@media (max-width: 45em) {

    .portfolio-container-grid {
        grid-template-columns: 1fr;
        flex: 22;
    }

    .iframe-container {
        flex: 22;
    }
}