/* Nav */

.project-nav {
    display: flex;
    justify-content: space-between;
    height: max-content;
    padding: 12px 36px;
    margin-bottom: 180px;
    width: calc(100% - 72px);
    position: fixed;
    top: 0;
    z-index: 2;
    align-items: center;
    gap: 48px;
    background: hsla(213, 72%, 6%, 72%);
    border-bottom: 1px solid var(--dark-grey-2);
    backdrop-filter: saturate(180%) blur(20px);
}

    .project-nav
    .project-nav_left {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 24px;
    }

    .project-nav
    .project-nav_icon {
        height: 72px;
        border-radius: 6px;
    }

    .project-nav
    .project-nav_project {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 24px;
    }

        .project-nav
        .project-nav_project:hover {
            cursor: pointer;
        }

    .project-nav
    .project-nav_project
    .project-nav_project_text {
        display: flex;
        flex-direction: column;
        text-align: left;
        color: var(--light-grey);
        gap: 6px;
    }

        .project-nav
        .project-nav_project
        .project-nav_link {
            color: var(--white);
            text-decoration: none;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
    
    .project-nav
    .project-nav_skip {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 6px;
        color: var(--dark-grey);
    }






/* Header */

.header {
    width: 100%;
    margin: 72px auto 24px auto;
}

    .header
    .header_container {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        color: var(--dark-grey);
        width: 100%;
    }

        .header
        .header_container
        .header_company {
            display: flex;
            flex-direction: row;
            gap: 12px;
        }

            .header
            .header_container
            .header_company
            .icon {
                width: 5px;
            }






/* Title Card */

.title-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 3vh 0 3vh 0;
    height: calc(60vh - 12vh);
}

    .title-card
    .title-card_title {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 24px;
        text-align: center;
    }

    .title-card
    .title-card_background {
        user-select: none;
        overflow: hidden;
        z-index: -1;
        width: 100%;
        min-width: 1400px;
        position: absolute;
    }

        .title-card
        .title-card_background
        .title-card_background_image {
            width: 100%;
        }






/* Credits */

.credits {
    display: flex;
    flex-direction: column;
    width: 93vw;
    margin: 72px auto 0 auto;
    gap: 72px;
}

    .credits
    .credits_container {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

        .credits
        .credits_container
        .credit:not(:nth-last-child(1)) {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            padding-bottom: 24px;
            border-bottom: 1px solid var(--dark-grey-2);
        }

        .credits
        .credits_container
        .credit
        .typography_caption {
            color: var(--dark-grey);
        }

        .credits
        .credits_container
        .credit
        .credit_names {
            display: flex;
            flex-direction: column;
            gap: 6px;
            text-align: right;
            color: var(--light-grey);
        }






/* Profile */

.profile {
    display: flex;
    flex-direction: column;
    width: 93vw;
    margin: 144px auto;
}

    .profile
    .grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 1fr;
        border: 1px solid var(--dark-grey-2);
        padding: 12px;
    }

    .profile
    .grid
    .grid_column {
        display: flex;
        flex-direction: column;
        padding: 24px;
        gap: 12px;
    }

    .profile
    .grid
    .grid_column
    .typography_caption {
        color: var(--dark-grey);
    }

    .profile
    .grid
    .grid_column
    .typography_paragraph-x-small {
        color: var(--light-grey);
    }

.profile_hypothesis {
    display: flex;
    flex-direction: column;
    width: 93vw;
    margin: 144px auto;
}

    .profile_hypothesis
    .grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 1fr;
        border: 1px solid var(--dark-grey-2);
        padding: 12px;
    }

    .profile_hypothesis
    .grid
    .grid_column {
        display: flex;
        flex-direction: column;
        padding: 24px;
        gap: 12px;
    }

    .profile_hypothesis
    .grid
    .grid_column
    .typography_caption {
        color: var(--dark-grey);
    }

    .profile_hypothesis
    .grid
    .grid_column
    .typography_paragraph-x-small {
        color: var(--light-grey);
    }






/* Preview */

.preview {
    display: flex;
    flex-direction: column;
    width: 93vw;
    margin: 0 auto;
}

    .preview
    .image-contain {
        width: 100%;
    }







/* Content */

.content {
    display: flex;
    flex-direction: column;
    width: 93vw;
    margin: 240px auto;
    gap: 120px;
}

    
    .content
    .typography_paragraph-x-small,
    .content
    .typography_paragraph-small,
    .content
    .typography_paragraph-medium,
    .content
    .typography_paragraph-large {
        color: var(--light-grey);
    }

    .content
    .image-contain {
        width: 100%;
    }

    .content
    .layout_image-full {
        display: flex;
        flex-direction: column;
        gap: 36px;
        align-items: center;
    }

        .content
        .layout_image-full
        .image {
            width: 100%;
        }

    .content
    .objective-list_container {
        display: flex;
        flex-direction: column;
        gap: 36px;
    }

        .content
        .objective-list_container
        .objective {
            display: flex;
            flex-direction: column;
            gap: 12px;
            padding: 72px;
        }

        .content
        .objective-list_container
        .objective
        .objective_header {
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            gap: 12px;
        }

        .content
        .icon {
            width: 5px;
        }

            .content
            .objective-list_container
            .objective
            .typography_paragraph-medium {
                color: var(--white);
            }

            .content
            .objective-list_container
            .objective
            .typography_paragraph-medium
            .typography_caption {
                color: var(--white);
            }





/* Image */

.image_tile {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 60px 0;
}

    .image_tile
    .image {
        width: 100%;
        border-radius: 18px;
    }

    .image_tile
    .typography_paragraph-x-small {
        width: 50%;
    }

.image_tile-row {
    display: flex;
    flex-direction: row;
    gap: 18px;
}

    .image_tile-row
    .image {
        width: 100%;
        border-radius: 18px;
    }

    .image_tile-row
    .typography_paragraph-x-small {
        width: 50%;
    }





/* Footer */

.footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 93vw;
    margin: 240px auto;
}

    .footer
    .layout_inner {
        gap: 12px;
    }


/* Playlist */

.playlist {
    display: flex;
    flex-direction: column;
    width: 93vw;
    margin: 144px auto;
}

    .playlist
    .layout_inner {
        gap: 12px;
    }

        .playlist
        .grid {
            display: flex;
            flex-direction: row;
            gap: 6px;
        }

            .album_outer {
                background: var(--black);
                padding: 24px;
                border-radius: 24px;
                width: 100%;
                transition: .2s all ease-in-out;
            }

                .album_outer:hover {
                    background: var(--dark-grey-3)
                }

                .album {
                    display: flex;
                    flex-direction: column;
                    gap: 12px;
                }

                .album
                .image {
                    border-radius: calc(24px - 12px);
                    width: 100%;
                }

                .playlist_text {
                    display: flex;
                    flex-direction: column;
                    gap: 6px;
                    padding: 12px 0 12px 0;
                }

                    .playlist_text
                    .typography_caption-small {
                        color: var(--light-grey);
                    }