$bg-gradient: linear-gradient(
 180deg,
 rgba(0, 0, 0, 0.6) 50%,
 rgba(0, 0, 0, 0.1) 100%
);

* {
 box-sizing: border-box;
 user-select: none;
}

a {
 color: var(--color-surface-white);
 text-decoration: none;
}

body {
 margin: 0;
 padding: 0;
 height: 100vh;
 color: var(--light);
 text-transform: uppercase;
}

h2 {
 font-size: clamp(1rem, 6vw, 10rem);
 font-weight: 600;
 line-height: 1.2;
 text-align: center;
 margin-right: -0.5em;
 width: 90vw;
 max-width: 1200px;
 text-transform: none;
}

header {
 position: fixed;
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 0 5%;
 width: 100%;
 z-index: 3;
 height: 7em;
 font-size: clamp(0.66rem, 2vw, 1rem);
 letter-spacing: 0.5em;
}

section {
 height: 100%;
 width: 100%;
 top: 0;
 position: fixed;
 visibility: hidden;

 .outer,
 .inner {
 width: 100%;
 height: 100%;
 overflow-y: hidden;
 }

 .bg {
 display: flex;
 align-items: center;
 justify-content: center;
 position: absolute;
 height: 100%;
 width: 100%;
 top: 0;
 background-size: cover;
 background-position: center;

 h2 {
 z-index: 999;
 }

 .clip-text {
 overflow: hidden;
 }
 }
}

.first {
 .bg {
 background-image: $bg-gradient,
 url("https://assets.codepen.io/16327/site-landscape-1.jpg");
 }
}

.second {
 .bg {
 background-image: $bg-gradient,
 url("https://assets.codepen.io/16327/site-landscape-2.jpg");
 }
}

.third {
 .bg {
 background-image: $bg-gradient,
 url("https://assets.codepen.io/16327/site-landscape-3.jpg");
 }
}

.fourth {
 .bg {
 background-image: $bg-gradient,
 url("https://assets.codepen.io/16327/site-landscape-4.jpg");
 }
}

.fifth {
 .bg {
 background-image: $bg-gradient,
 url("https://assets.codepen.io/16327/site-landscape-5.jpg");
 background-position: 50% 45%;
 }
}

h2 * {
 will-change: transform;
}