.project {
    -webkit-transform: translate3d(0, calc((100svh * 2 / 12) + var(--nav-height)), 0);
    transform: translate3d(0, calc((100svh * 2 / 12) + var(--nav-height)), 0);
    -webkit-transition: transform 500ms ease-out;
    transition: transform 500ms ease-out;
}
.project.visible {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.project-head {
    display: block;
    width: 100%;
    background-color: var(--bg);
    position: relative;
    z-index: 10;
    transform: translate3d(0, 0, 0);
    padding: var(--padding);
    margin-top: calc((100% * 2 / 12) * -1);
}
.project-head-elements {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: flex-start;
    align-content: flex-start;
    gap: var(--gap);
    padding-bottom: 40px;
}
.project-head-tags {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: flex-start;
    align-content: flex-start;
    gap: var(--gap);
}
.project-head-services {
    display: flex;
    flex-wrap: wrap;
    gap: var(--padding);
    row-gap: 0;
    max-width: 400px;
}
.project-title {
    display: block;
    width: 100%;
    font-size: 120px;
    line-height: 120px;
}
.project-title.svg-title {
    font-size: unset;
    line-height: unset;
    background-color: var(--bg);
    height: 120px;
    display: flex;
    align-items: center;
}
.project-title.svg-title img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left center;
}
/* Title block when used on pages (not projects) */
.page .project-title {
    padding: var(--padding);
    position: relative;
    z-index: 10;
    transform: translate3d(0, 0, 0);
    background-color: var(--bg);
}
/* First title block pulls up to cover nav-typemark */
.page .project-title:first-child {
    margin-top: calc((100% * 2 / 12) * -1);
}
.page .project-title.svg-title {
    height: 180px;
}
.project-featured-image {
    display: block;
    width: 100%;
    aspect-ratio: 144 / 90;
    background-color: var(--bg);
    position: relative;
    z-index: 10;
    transform: translate3d(0, 0, 0);
}
.project-featured-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.project-body {
    display: block;
    width: 100%;
    background-color: var(--bg);
    position: relative;
    z-index: 10;
    transform: translate3d(0, 0, 0);
}
.project-navigator {
    display: grid;
    width: 100%;
    align-items: flex-start;
    align-content: flex-start;
    grid-template-columns: minmax(0, 1fr);
    padding: var(--separator-padding) var(--padding);
    gap: var(--gap);
    background-color: var(--bg);
    position: relative;
    z-index: 10;
    transform: translate3d(0, 0, 0);
}
.project-element {
    display: flex;
    width: 100%;
    align-items: center;
    align-content: center;
    justify-content: flex-start;
    flex-wrap: wrap;
}
.project-element.right {
    justify-content: flex-end;
}
.project-element-indicator {
    display: flex;
    width: 100%;
    align-items: center;
    align-content: center;
    gap: var(--gap);
}
.project-element-indicator svg {
    display: inline-block;
    width: 15px;
    line-height: 15px;
    fill: var(--color);
}
.project-element.right .project-element-indicator {
    justify-content: flex-end;
}
.project-element.right .project-element-name {
    text-align: right;
}
.project-element-name {
    font-size: 56px;
    line-height: 60px;
    max-width: 50%;
}
@media(hover:hover) {
    .project-element:hover .project-element-name {
        color: var(--linkHover);
    }
}
@media(max-width: 780px) {
    .project {
        -webkit-transform: translate3d(0, calc((var(--app-height) * 0.32) + var(--nav-height)), 0);
        transform: translate3d(0, calc((var(--app-height) * 0.32) + var(--nav-height)), 0);
    }
    .project-head {
        margin-top: calc((var(--app-height) * 0.32) * -1);
    }
    .project-head-elements {
        grid-template-columns: minmax(0, 1fr);
        padding-bottom: 40px;
    }
    .project-title {
        font-size: 60px;
        line-height: 60px;
    }
    .project-title.svg-title {
        height: 60px;
    }
    .page .project-title.svg-title {
        height: 90px;
    }
    .page .project-title:first-child {
        margin-top: calc((var(--app-height) * 0.32) * -1);
    }
    .project-featured-image {
        aspect-ratio: 3 / 5;
    }
    .project-element-name {
        width: 100%;
        max-width: 100%;
    }
    .project-navigator {
        gap: var(--separator-padding);
    }
}