body {
    width: 100%;
    height: 100dvh;
    margin: 0;

    overflow: hidden;

    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
    min-height: 0;

    display: flex;
    flex-direction: column;
    
}

.project-list {
    height: 100%;
    margin: 1rem 2rem;

    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow-y: hidden;
}

.project-disabled {
    display: none;
}

.project-active {
    display: block;
}

.project-list article {
    flex: 30;
    min-height: 0;
    transition: flex 600ms cubic-bezier(1, 0, 0.8, 1);
}

.project-list article.active {
    flex: 400;
}

.project-list article div {
    height: 100%;
}

/* Project text */
.project-name {
    opacity: 1;
    transition: opacity 200ms cubic-bezier(1, 0, 0.58, 1);
    display: flex;
    justify-content: space-between;
}

.project-name.fading {
    opacity: 0.2;
}

.project.inactive div .project-name {
    opacity: 20%;
}

.project.inactive div .project-name:hover {
    opacity: 70%;
    transition: opacity 0.3s ease-out;
    cursor: pointer;
}

.project-box {
    border: 1px red solid;
    overflow: hidden;
    min-height: 0;

    flex: 1 1 0%;   /* default — fills parent's current height, always */
}

/* only applied transiently while a box is closing */
.project-box.height-locked {
    flex: 0 1 auto;   /* grow:0 so an explicit basis isn't overridden; shrink:1 so it can never overflow */
    transition: flex-basis 600ms cubic-bezier(1, 0, 0.8, 1);
}

.project-thumbnail-container {
    overflow: hidden;

    display: flex;
    padding: .75rem;

    box-sizing: border-box;
}


.project-thumbnails {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    aspect-ratio: 16 / 10; /* adjust this to whatever ratio you want */
    overflow: hidden;
    border: 1px red solid;
}

.project-thumbnails img, .thumbnail-video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.project-thumbnails img:hover,
.thumbnail-video:hover {
    transform: scale(1.03);
    cursor: pointer;
}