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

.project__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.project__text__sub {
    color: var(--gray-40);
}

main {
    row-gap: 120px;
}

.content {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    row-gap: var(--gap-large);
    column-gap: var(--column-gap-large);
    position: relative;
}

.content h1 {
    grid-column: 1 / -1;
}

.description {
    grid-column: 1 / 7;
    display: flex;
    flex-direction: column;
    gap: var(--gap-large);
}

.services {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    row-gap: var(--row-gap-small);
    column-gap: var(--column-gap-large);
}

.services li {
    grid-column: span 2;
}

.credits {
    grid-column: 9 / -1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap-large);
    height: fit-content;
}

.credits__item p {
    color: var(--gray-60);
    margin-bottom: 4px;
}

.credits__item ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.credits__item a {
    color: var(--gray-40);
    text-decoration: none;
}

.gallery {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    row-gap: var(--row-gap-large);
    column-gap: var(--column-gap-large);
}

.video--large {
    grid-column: span 12;
    position: relative;
    padding-bottom: 56.25%;
}

.video--medium {
    grid-column: span 12;
    position: relative;
    padding-bottom: 66.67%;
}

.video--square {
    grid-column: span 6;
    position: relative;
    padding-bottom: 100%;
}

iframe {
    position: absolute;
    width: 100%;
    height: 100%;
}

@media (max-width: 768px) {
    main {
        row-gap: 80px;
    }

    h1 {
        font-size: 48px;
        line-height: 50.4px;
        letter-spacing: -0.5px;
    }

    .content,
    .gallery {
        row-gap: var(--row-gap-medium);
        column-gap: var(--row-gap-medium);
    }

    .description {
        grid-column: 1 / 8;
        gap: var(--gap-medium);
    }

    .services {
        grid-template-columns: repeat(4, 1fr);
        column-gap: var(--column-gap-medium);
    }

    .credits {
        display: flex;
        flex-direction: column;
        gap: var(--gap-medium);
    }
}

@media (max-width: 480px) {
    main {
        row-gap: 64px;
    }

    h1 {
        margin-bottom: -8px;
    }

    .gallery,
    .content {
        grid-template-columns: repeat(6, 1fr);
    }

    .credits,
    .services {
        row-gap: var(--row-gap-small);
    }


    .gallery .square,
    .gallery .large,
    .gallery .small,
    .gallery .medium,
    .description,
    .credits {
        grid-column: 1 / -1;
    }

    .video--large,
    .video--medium{
        grid-column: span 6;
    }
}

.project__nav {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
}

.project__nav__item {
    color: var(--gray-40);
}