.project {
    display: flex;
    width: 100vw;
    height: fit-content;
    flex-direction: column;
    min-height: calc(var(--vh, 1vh) * 100);
}

/******************* PREVIEW *******************/

.projectPreview {
    width: 100%;
    height: calc(var(--vh, 1vh) * 100);
    position: relative;
    display: flex;
    justify-content: start;
    align-items: start;
    background-color: black;
}

.video {
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: var(--color-black);
}

.video iframe {
    aspect-ratio: 16/9;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.previewText {
    position: sticky;
    top: 0;
    z-index: 10;
    padding: var(--space-medium);

    display: flex;
    flex-direction: column;
    gap: var(--space-small);

    color: var(--color-white);
    text-shadow: 0 0 6px black;

    width: 100%;
    align-items: center;
    /* background-color: black; */
}

.projectTitle {
    color: white;
    text-shadow: 0 0 6px black;
}

/******************* INFOS *******************/

.projectInfo {
    display: grid;
    justify-content: space-between;
    grid-template-columns: 1fr 3fr 2fr;
    min-height: calc(var(--vh, 1vh) * 100);
}

.infoText {
    padding: var(--space-big) var(--space-medium);
    position: sticky;
    height: fit-content;
    top: 0;

    width: 100%;
    max-width: var(--max);
}

.thumbnails {
    display: flex;
    flex-direction: column;
    max-width: 600px;
    width: 100%;
    justify-content: start;
    padding: var(--space-big) var(--space-medium);
    gap: var(--space-medium);
    min-height: calc(var(--vh, 1vh) * 100);
}