*,
*:before,
*:after {
    box-sizing: border-box
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline
}

body {
    line-height: 1
}

ol,
ul {
    list-style: none
}

audio,
canvas,
video {
    display: inline-block;
    zoom: 1;
    max-width: 100%
}

a:active,
a:hover {
    outline: 0
}

img {
    vertical-align: middle;
    border: 0;
    -ms-interpolation-mode: bicubic
}

figure {
    margin: 0
}

@font-face {
    font-family: nw;
    src: url(../fonts/NewakeRegular.woff) format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: ag;
    src: url(../fonts/AktivGroteskMedium.woff) format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap
}

#home .work .projects .project .media-wrapper {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0
}

#error .text-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.toggle {
    display: flex;
    align-items: center;
    justify-content: center
}

#home .work .projects .project .project-meta {
    display: flex;
    align-items: center
}

:root {
    --c-black: #00031F;
    --c-white: #ffffff;
    --col: 11.8rem;
    --unit: 2.4rem;
    --ar: 1.736/1
}

@media screen and (max-width:1099px),
screen and (max-width:1365px)and (pointer:coarse) {
    :root {
        --col: 10.5rem;
        --unit: 2rem
    }
}

@media screen and (max-width:767px) {
    :root {
        --col: 7.4rem;
        --unit: 1.6rem
    }
}

body,
p,
button,
.copyright,
.metas.footer-metas .meta.meta-email .copied,
.meta .label,
.meta .text {
    font-size: 1.7rem;
    font-family: ag, sans-serif;
    font-weight: 500;
    letter-spacing: -.01rem;
    line-height: 120%
}

@media screen and (max-width:767px) {

    body,
    p,
    button,
    .copyright,
    .metas.footer-metas .meta.meta-email .copied,
    .meta .label,
    .meta .text {
        font-size: 1.5rem
    }
}

.copyright,
.metas.footer-metas .meta.meta-email .copied,
.meta .label,
.meta .text {
    font-size: 1.4rem;
    line-height: 110%
}

@media screen and (max-width:767px) {

    .copyright,
    .metas.footer-metas .meta.meta-email .copied,
    .meta .label,
    .meta .text {
        font-size: 1.3rem
    }
}

*,
*:before,
*:after {
    -webkit-tap-highlight-color: transparent
}

html,
body {
    width: 100%;
    height: auto;
    margin: 0;
    overscroll-behavior: none;
    -ms-overflow-style: none;
    scrollbar-width: none;
    touch-action: none;
    background: var(--c-white);
    color: var(--c-black)
}

@media screen and (min-width:1366px),
screen and (min-width:1100px)and (pointer:fine) {

    html,
    body {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0
    }
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none
}

html {
    font-size: .5787037037vw;
    line-height: 100%
}

@media screen and (max-width:1099px),
screen and (max-width:1365px)and (pointer:coarse) {
    html {
        font-size: 1vw
    }
}

@media screen and (max-width:767px) {
    html {
        font-size: 2.5vw
    }
}

html.is-transitioning {
    pointer-events: none
}

body {
    color: var(--c-black)
}

body:focus,
.page-content:focus {
    outline: none
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap
}

@media screen and (min-width:1366px),
screen and (min-width:1100px)and (pointer:fine) {
    .page {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 0
    }
}

@media screen and (max-width:1099px),
screen and (max-width:1365px)and (pointer:coarse) {
    .page-content {
        display: flex;
        flex-direction: column;
        min-height: 100dvh;
        padding-top: 12rem;
        position: relative;
        z-index: 0
    }
}

@media screen and (max-width:767px) {
    .page-content {
        padding-top: 16.4rem;
        z-index: 0
    }
}

h1,
p {
    cursor: default;
    color: var(--c-black)
}

h1 {
    font-family: nw, sans-serif;
    text-transform: uppercase;
    font-size: 10.4rem;
    letter-spacing: .1rem;
    font-weight: 400;
    line-height: 80%
}

@media screen and (max-width:767px) {
    h1 {
        font-size: 6.4rem
    }
}

a {
    color: var(--c-black);
    text-decoration: none
}

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

p {
    line-height: 148%
}

img,
svg {
    max-width: 100%;
    height: auto
}

button {
    padding: 0;
    background: none;
    border: none;
    font-weight: 500;
    cursor: pointer
}

button.copied-active {
    cursor: default
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0
}

.media-wrapper {
    position: relative;
    overflow: hidden;
    pointer-events: none;
    background: #eee
}

.media-wrapper .media {
    position: absolute;
    -o-object-fit: cover;
    object-fit: cover;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap
}

.link {
    display: inline-block;
    position: relative
}

.line {
    display: block;
    position: relative;
    text-align: start
}

.logo,
.nav,
.back {
    position: absolute;
    z-index: 1;
    font-size: 1.5rem;
    line-height: 120%
}

@media screen and (max-width:767px) {

    .logo,
    .nav,
    .back {
        font-size: 1.4rem
    }
}

.logo {
    top: var(--unit);
    left: var(--unit)
}

.nav {
    display: flex;
    top: var(--unit);
    right: 7.2rem
}

@media screen and (max-width:1099px),
screen and (max-width:1365px)and (pointer:coarse) {
    .nav {
        right: 6rem
    }
}

@media screen and (max-width:767px) {
    .nav {
        right: 5.2rem
    }
}

.nav .nav-comma {
    margin-right: .5rem;
    margin-left: 0
}

.nav .nav-link {
    font-size: 1.5rem
}

@media screen and (max-width:767px) {
    .nav .nav-link {
        font-size: 1.4rem
    }
}

.nav .copied-active {
    cursor: default
}

.nav .copied {
    position: absolute;
    right: 0;
    bottom: -2.8rem;
    pointer-events: none;
    font-size: 1.4rem
}

@media screen and (max-width:767px) {
    .nav .copied {
        font-size: 1.3rem
    }
}

.toggle {
    width: 4rem;
    height: 4rem;
    position: absolute;
    top: 1.2rem;
    right: 1.2rem;
    background: none;
    border: none;
    margin: 0;
    padding: 0;
    line-height: 100%;
    cursor: pointer;
    z-index: 1
}

@media screen and (max-width:1099px),
screen and (max-width:1365px)and (pointer:coarse) {
    .toggle {
        top: .8rem;
        right: .8rem
    }
}

@media screen and (max-width:767px) {
    .toggle {
        width: 3.6rem;
        height: 3.6rem;
        top: .59rem;
        right: .5rem
    }
}

.toggle .toggle-inner {
    display: block;
    width: 1.8rem;
    height: 1.8rem
}

@media screen and (max-width:767px) {
    .toggle .toggle-inner {
        width: 1.6rem;
        height: 1.6rem
    }
}

.back {
    top: 2.4rem;
    left: 30.8rem;
    padding-right: 2rem
}

@media screen and (max-width:767px) {
    .back {
        min-width: 7rem;
        left: var(--unit);
        top: 12rem;
        padding: 0
    }
}

.back-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    position: absolute;
    top: 0;
    left: 0;
}

.back-arrow svg {
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none
}

.back.link .underline {
    width: calc(100% - 2rem);
    left: 2rem
}

.copyright {
    display: block;
    position: absolute;
    bottom: var(--unit);
    right: var(--unit)
}

.underline {
    display: block;
    width: 100%;
    height: 1px;
    position: absolute;
    left: 0;
    bottom: 0
}

.metas {
    display: flex;
    align-items: flex-end
}

@media screen and (min-width:1366px),
screen and (min-width:1100px)and (pointer:fine) {
    .metas.footer-metas {
        position: absolute;
        bottom: var(--unit);
        left: var(--unit)
    }
}

@media screen and (max-width:1099px),
screen and (max-width:1365px)and (pointer:coarse) {
    .metas.footer-metas {
        padding: 0 var(--unit) var(--unit)
    }
}

@media screen and (max-width:767px) {
    .metas.footer-metas {
        display: flex;
        flex-direction: column-reverse;
        align-items: flex-start;
        margin-top: auto
    }
}

.metas.footer-metas .meta.meta-email {
    position: relative
}

.metas.footer-metas .meta.meta-email.copied-active {
    pointer-events: none
}

.metas.footer-metas .meta.meta-email .copied {
    position: absolute;
    bottom: 0;
    left: 0;
    pointer-events: none
}

@media screen and (max-width:767px) {
    .metas.footer-metas .meta.meta-available {
        display: none
    }
}

.metas .meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 26rem;
    margin: 0
}

@media screen and (max-width:767px) {
    .metas .meta {
        width: auto
    }
}

@media screen and (min-width:1366px),
screen and (min-width:1100px)and (pointer:fine) {
    .metas .meta:not(:first-child) {
        margin-left: var(--unit)
    }
}

.meta .label,
.meta .text {
    display: block
}

.meta dd {
    margin: 0
}

.meta .label {
    margin-bottom: .4rem
}

@media screen and (min-width:1366px),
screen and (min-width:1100px)and (pointer:fine) {
    .meta .label {
        margin-bottom: .8rem
    }
}

.meta .text {
    line-height: 120%
}

@media screen and (max-width:767px) {
    .desktop-only {
        display: none !important
    }
}

@media screen and (min-width:1366px),
screen and (min-width:1100px)and (pointer:fine) {
    .mobile-only {
        display: none !important
    }
}

html.no-webgl,
html.no-webgl body {
    width: auto;
    height: auto;
    position: static;
    overflow: visible;
    touch-action: auto;
    overscroll-behavior: auto
}

html.no-webgl .canvas,
html.no-webgl .overlay,
html.no-webgl .loader,
html.no-webgl .toggle,
html.no-webgl .copied {
    display: none !important
}

html.no-webgl .page {
    display: block;
    width: auto;
    height: auto;
    min-height: 100dvh;
    position: relative;
    padding: 12rem 0 10rem
}

html.no-webgl .nav {
    right: var(--unit)
}

html.no-webgl .media-wrapper {
    pointer-events: auto
}

html.no-webgl .media-wrapper .media {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
    clip: auto;
    clip-path: none;
    white-space: normal
}

html.no-webgl .meta .label {
    opacity: .4
}

html.no-webgl #home .text-wrapper {
    padding: 0;
    margin: 0 var(--unit) 8rem
}

html.no-webgl #home .work {
    width: auto;
    height: auto;
    position: static;
    padding: 0 var(--unit);
    margin-bottom: 10rem;
    pointer-events: auto
}

html.no-webgl #home .work .projects {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--unit);
    list-style: none;
    margin: 0;
    padding: 0
}

@media screen and (max-width:767px) {
    html.no-webgl #home .work .projects {
        display: block
    }
}

@media screen and (max-width:767px) {
    html.no-webgl #home .work .projects .project-item:not(:last-child) {
        margin-bottom: 2.8rem
    }
}

html.no-webgl #home .work .projects .project {
    width: 100%;
    height: auto;
    position: static
}

html.no-webgl #home .work .projects .project .media-wrapper {
    height: auto;
    position: relative;
    aspect-ratio: 1.54/1;
    margin-bottom: 1.2rem
}

html.no-webgl #home .work .projects .project .project-meta {
    display: flex !important;
    justify-content: flex-start;
    margin-bottom: 2.4rem
}

html.no-webgl #home .work .project-index {
    display: none !important
}

html.no-webgl #work .title,
html.no-webgl #work .description,
html.no-webgl #work .metas:not(.footer-metas),
html.no-webgl #work .content,
html.no-webgl #work .next-project {
    position: static;
    transform: none
}

html.no-webgl #work .title {
    display: block;
    margin-bottom: 2rem
}

html.no-webgl #work .description {
    max-width: 48rem;
    padding: 0 var(--unit);
    margin: 0 0 4rem
}

html.no-webgl #work .metas:not(.footer-metas) {
    align-items: flex-start;
    padding: 0 var(--unit)
}

html.no-webgl #work .content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--unit);
    padding: 0 var(--unit) 10rem;
    margin-top: 8rem
}

@media screen and (max-width:767px) {
    html.no-webgl #work .content {
        display: block
    }
}

html.no-webgl #work .content .media-wrapper {
    width: 100%;
    position: relative
}

@media screen and (max-width:767px) {
    html.no-webgl #work .content .media-wrapper:not(:last-child) {
        margin-bottom: 2rem
    }
}

html.no-webgl #work .next-project {
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 0 var(--unit) var(--unit)
}

html.no-webgl #work .work-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0
}

html.no-webgl #info {
    padding: 0
}

@media screen and (max-width:767px) {
    #home .page-content {
        padding-top: 12rem
    }
}

#home .text-wrapper {
    pointer-events: none
}

@media screen and (max-width:1099px),
screen and (max-width:1365px)and (pointer:coarse) {
    #home .text-wrapper {
        margin: 0 var(--unit) 8rem
    }
}

@media screen and (max-width:767px) {
    #home .text-wrapper {
        margin: 0 var(--unit) 8rem
    }
}

@media screen and (min-width:1366px),
screen and (min-width:1100px)and (pointer:fine) {
    #home .text-wrapper {
        padding: 7.2rem var(--unit) var(--unit)
    }
}

#home .text-wrapper .overline {
    display: block;
    margin-bottom: 3.2rem
}

@media screen and (max-width:1099px),
screen and (max-width:1365px)and (pointer:coarse) {
    #home .text-wrapper .overline {
        display: none
    }
}

#home .text-wrapper .title {
    margin-bottom: 2rem
}

@media screen and (min-width:1366px),
screen and (min-width:1100px)and (pointer:fine) {
    #home .text-wrapper .title {
        margin-bottom: 2.4rem
    }
}

#home .text-wrapper .title .line:nth-child(1) {
    margin-bottom: .8rem
}

@media screen and (max-width:1099px),
screen and (max-width:1365px)and (pointer:coarse) {
    #home .text-wrapper .title .line:nth-child(1) {
        margin-bottom: 1rem
    }
}

@media screen and (max-width:767px) {
    #home .text-wrapper .title .line:nth-child(1) {
        margin-bottom: .6rem
    }
}

#home .text-wrapper .text {
    max-width: 40rem
}

#home .work {
    pointer-events: none
}

@media screen and (max-width:1099px),
screen and (max-width:1365px)and (pointer:coarse) {
    #home .work {
        pointer-events: auto
    }
}

@media screen and (min-width:1366px),
screen and (min-width:1100px)and (pointer:fine) {
    #home .work {
        width: 54.8rem;
        height: 100%;
        position: absolute;
        top: 0;
        right: 30.6rem
    }
}

@media screen and (max-width:1099px),
screen and (max-width:1365px)and (pointer:coarse) {
    #home .work {
        padding: 0 var(--unit);
        margin-bottom: 10rem
    }
}

#home .work .projects {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0
}

@media screen and (max-width:1099px),
screen and (max-width:1365px)and (pointer:coarse) {
    #home .work .projects {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--unit)
    }
}

@media screen and (max-width:767px) {
    #home .work .projects {
        display: block
    }
}

@media screen and (max-width:767px) {
    #home .work .projects .project-item:not(:last-child) {
        margin-bottom: 2.8rem
    }
}

#home .work .projects .project {
    display: block;
    width: 100%;
    will-change: transform;
    transform: translateZ(0)
}

@media screen and (min-width:1366px),
screen and (min-width:1100px)and (pointer:fine) {
    #home .work .projects .project {
        width: 54.8rem;
        height: 33.4rem;
        position: absolute;
        top: 0;
        left: 0
    }
}

@media screen and (max-width:1099px),
screen and (max-width:1365px)and (pointer:coarse) {
    #home .work .projects .project .media-wrapper {
        height: auto;
        position: relative;
        aspect-ratio: 1.54/1;
        margin-bottom: 1.2rem
    }
}

#home .work .project-index {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: var(--col);
    position: fixed;
    top: 38vh;
    right: var(--unit)
}

#home .work .project-index .project-index-title {
    margin-bottom: 1.2rem;
    font-size: 1.4rem
}

#home .work .project-index .project-titles {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin: 0 0 2.8rem;
    padding: 0;
    list-style: none;
    pointer-events: auto
}

#home .work .project-index .project-titles .project-title {
    display: block;
    font-size: 1.5rem;
    padding: .2rem 0
}

#home .work .project-index .project-videos {
    width: calc(var(--col) + var(--unit));
    position: relative
}

#home .work .project-index .project-videos .project-video {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0
}

#home .work .project-index .project-videos .media-wrapper {
    width: 100%;
    aspect-ratio: var(--ar)
}

#work .title {
    padding: 0 var(--unit)
}

@media screen and (min-width:1366px),
screen and (min-width:1100px)and (pointer:fine) {
    #work .title {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-30.2rem);
        font-size: 12rem
    }
}

@media screen and (max-width:1099px),
screen and (max-width:1365px)and (pointer:coarse) {
    #work .title {
        margin-bottom: 2rem
    }
}

@media screen and (max-width:767px) {
    #work .title {
        font-size: 6.2rem
    }
}

@media screen and (max-width:1099px),
screen and (max-width:1365px)and (pointer:coarse) {
    #work .title .line:not(:last-child) {
        margin-bottom: .6rem
    }
}

#work .description {
    max-width: 40rem;
    margin: 0 0 4rem
}

@media screen and (min-width:1366px),
screen and (min-width:1100px)and (pointer:fine) {
    #work .description {
        position: absolute;
        bottom: 2.4rem;
        left: 2.4rem;
        margin: 0
    }
}

@media screen and (max-width:1099px),
screen and (max-width:1365px)and (pointer:coarse) {
    #work .description {
        max-width: 48rem;
        padding: 0 var(--unit)
    }
}

@media screen and (max-width:767px) {
    #work .description {
        margin: 0 0 4rem
    }
}

@media screen and (min-width:1366px),
screen and (min-width:1100px)and (pointer:fine) {
    #work .metas:not(.footer-metas) {
        position: absolute;
        left: 59.2rem;
        bottom: 2.4rem
    }
}

@media screen and (max-width:1099px),
screen and (max-width:1365px)and (pointer:coarse) {
    #work .metas:not(.footer-metas) {
        align-items: flex-start;
        padding: 0 var(--unit)
    }
}

@media screen and (max-width:767px) {
    #work .metas:not(.footer-metas) {
        flex-direction: column
    }
}

#work .metas:not(.footer-metas) .meta {
    width: var(--col)
}

@media screen and (max-width:767px) {
    #work .metas:not(.footer-metas) .meta {
        width: auto
    }
}

@media screen and (max-width:767px) {
    #work .metas:not(.footer-metas) .meta:not(:last-child) {
        margin-bottom: 2rem
    }
}

#work .metas:not(.footer-metas) .meta:nth-child(2) {
    width: calc(var(--col) * 2 + var(--unit))
}

@media screen and (max-width:767px) {
    #work .metas:not(.footer-metas) .meta:nth-child(2) {
        width: auto
    }
}

#work .metas:not(.footer-metas) .meta .visit-arrow {
    display: inline-block;
    width: .8rem;
    height: .8rem;
    margin-left: .4rem
}

#work .metas:not(.footer-metas) .meta .underline {
    width: calc(100% - 1.5rem)
}

@media screen and (min-width:1366px),
screen and (min-width:1100px)and (pointer:fine) {
    #work .content {
        width: 100%;
        position: absolute;
        top: 50%;
        transform: translateY(-18.2rem);
        left: 0
    }
}

@media screen and (max-width:1099px),
screen and (max-width:1365px)and (pointer:coarse) {
    #work .content {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--unit);
        padding: 0 var(--unit) 10rem;
        margin-top: 6.4rem
    }
}

@media screen and (max-width:767px) {
    #work .content {
        display: block;
        padding: 0 var(--unit) 8rem
    }
}

#work .content .media-wrapper {
    aspect-ratio: var(--ar)
}

@media screen and (min-width:1366px),
screen and (min-width:1100px)and (pointer:fine) {
    #work .content .media-wrapper {
        width: 70rem;
        position: absolute;
        left: 0;
        top: 0
    }
}

@media screen and (max-width:767px) {
    #work .content .media-wrapper:not(:last-child) {
        margin-bottom: 2rem
    }
}

#work .next-project {
    display: flex;
    align-items: flex-end
}

@media screen and (max-width:767px) {
    #work .next-project {
        margin-left: auto
    }
}

@media screen and (max-width:1099px),
screen and (max-width:1365px)and (pointer:coarse) {
    #work .next-project {
        padding: 0 var(--unit) var(--unit)
    }
}

@media screen and (min-width:1366px),
screen and (min-width:1100px)and (pointer:fine) {
    #work .next-project {
        position: absolute;
        bottom: var(--unit);
        right: var(--unit)
    }
}

#work .next-project .meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    pointer-events: none
}

#work .next-project .media-wrapper {
    width: var(--col);
    aspect-ratio: 3/2;
    margin-left: var(--unit)
}

@media screen and (max-width:767px) {
    #work .next-project .media-wrapper {
        width: calc(var(--col) * 2 + var(--unit))
    }
}

@media screen and (max-width:1099px),
screen and (max-width:1365px)and (pointer:coarse) {
    #work .work-bottom {
        display: flex;
        justify-content: space-between;
        align-items: flex-end
    }
}

@media screen and (min-width:1366px),
screen and (min-width:1100px)and (pointer:fine) {
    #info .title {
        position: absolute;
        top: 10rem;
        left: var(--unit);
        font-size: 22rem
    }
}

@media screen and (max-width:1099px),
screen and (max-width:1365px)and (pointer:coarse) {
    #info .title {
        margin-left: var(--unit);
        margin-bottom: 18.4rem;
        font-size: 16rem
    }
}

@media screen and (max-width:767px) {
    #info .title {
        margin-left: var(--unit);
        margin-bottom: 3.2rem;
        font-size: 6.4rem
    }
}

@media screen and (max-width:767px) {
    #info .title br {
        display: none
    }
}

#info .title .line:nth-child(1) {
    margin-bottom: 1.6rem
}

@media screen and (max-width:767px) {
    #info .title .line:nth-child(1) {
        margin-bottom: 0
    }
}

#info .title .line:nth-child(2) {
    margin-left: 59.2rem
}

@media screen and (max-width:1099px),
screen and (max-width:1365px)and (pointer:coarse) {
    #info .title .line:nth-child(2) {
        margin-left: 29rem
    }
}

@media screen and (max-width:767px) {
    #info .title .line:nth-child(2) {
        margin-left: 0
    }
}

#info .media-wrapper {
    aspect-ratio: 1.65/1
}

@media screen and (min-width:1366px),
screen and (min-width:1100px)and (pointer:fine) {
    #info .media-wrapper {
        position: absolute;
        width: 54.8rem;
        top: 21rem;
        right: var(--unit)
    }
}

@media screen and (max-width:1099px),
screen and (max-width:1365px)and (pointer:coarse) {
    #info .media-wrapper {
        position: absolute;
        width: 36.2rem;
        top: 23rem;
        right: var(--unit)
    }
}

@media screen and (max-width:767px) {
    #info .media-wrapper {
        position: relative;
        top: unset;
        right: unset;
        align-self: flex-end;
        width: calc(100% - 3.2rem);
        margin-right: 1.6rem;
        margin-left: 1.6rem;
        margin-bottom: 3.2rem
    }
}

@media screen and (min-width:1366px),
screen and (min-width:1100px)and (pointer:fine) {
    #info .text-wrapper {
        position: absolute;
        bottom: var(--unit);
        left: var(--unit)
    }
}

@media screen and (max-width:1099px),
screen and (max-width:1365px)and (pointer:coarse) {
    #info .text-wrapper {
        max-width: 48rem;
        padding: 0 var(--unit);
        margin: 0 0 8rem
    }
}

@media screen and (max-width:767px) {
    #info .text-wrapper {
        max-width: 100%;
        margin: 0 0 6.4rem
    }
}

@media screen and (min-width:1366px),
screen and (min-width:1100px)and (pointer:fine) {
    #info .text-wrapper .text {
        max-width: 54.4rem;
        font-size: 2rem;
        line-height: 134%
    }
}

#info .text-wrapper .text:not(:last-child) {
    margin-bottom: 2.4rem
}

@media screen and (min-width:1366px),
screen and (min-width:1100px)and (pointer:fine) {
    #info .text-wrapper .text:not(:last-child) {
        margin-bottom: 3.2rem
    }
}

@media screen and (min-width:1366px),
screen and (min-width:1100px)and (pointer:fine) {
    #info .footer-metas {
        left: 87.6rem
    }
}

@media screen and (max-width:1099px),
screen and (max-width:1365px)and (pointer:coarse) {
    #info .footer-metas {
        margin-top: auto
    }
}

@media screen and (min-width:1366px),
screen and (min-width:1100px)and (pointer:fine) {
    #info .info-metas {
        position: absolute;
        bottom: 12.4rem;
        left: 87.6rem
    }
}

@media screen and (max-width:1099px),
screen and (max-width:1365px)and (pointer:coarse) {
    #info .info-metas {
        padding: 0 var(--unit);
        margin-bottom: 4.8rem
    }
}

@media screen and (max-width:767px) {
    #info .info-metas {
        display: block;
        margin-bottom: 6.4rem
    }
}

@media screen and (max-width:767px) {
    #info .info-metas .meta:not(:last-child) {
        margin-bottom: 4rem
    }
}

#info .info-metas .meta .text {
    line-height: 160%
}

#error .text-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 var(--unit)
}

@media screen and (max-width:767px) {
    #error .text-wrapper {
        width: 100%
    }
}

#error .title {
    display: inline-flex;
    margin-bottom: 2.4rem;
    font-size: 20rem
}

@media screen and (max-width:1099px),
screen and (max-width:1365px)and (pointer:coarse) {
    #error .title {
        font-size: 10.4rem
    }
}