/* ============================================================
   BASE
============================================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #fff;
}

/* ============================================================
   SLIDER
============================================================ */

.gallery-container {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: #fff;
    display: flex;
    align-items: flex-start;
    touch-action: none;
}

.track {
    display: flex;
    align-items: flex-start;
    will-change: transform;
}

/* ============================================================
   SLIDES
============================================================ */

.media-wrapper {
    flex: 0 0 auto;
    background: #fff;
    display: block;
}

.track.horizontal .media-wrapper {
    width: var(--slot-width, 25vw);
}

.track.horizontal .media-wrapper img,
.track.horizontal .media-wrapper video {
    width: 100%;
    height: auto;
    display: block;
}

.track.vertical .media-wrapper {
    height: var(--slot-height, 25vh);
}

.track.vertical .media-wrapper img,
.track.vertical .media-wrapper video {
    height: 100%;
    width: auto;
    display: block;
}

.track.mobile-portrait .media-wrapper {
    height: calc(var(--col) * 6.5);
}

.track.mobile-portrait .media-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

body.mobile-portrait::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(118, 118, 118, 0.03) 1px, transparent 1px),
        linear-gradient(to left, rgba(118, 118, 118, 0.03) 1px, transparent 1px);
    background-size: var(--col) 100%, 100% 100%;
    background-repeat: repeat-x, no-repeat;
}

body.mobile-portrait .gallery-container {
    z-index: 1;
    background: transparent;
}

body.mobile-portrait .track {
    position: relative;
    z-index: 1;
}

body.mobile-portrait .track .media-wrapper[data-format="A"] {
    width: calc(var(--col) * 9);
    aspect-ratio: 9 / 6.5;
}

body.mobile-portrait .track .media-wrapper[data-format="B"] {
    width: calc(var(--col) * 8);
    aspect-ratio: 8 / 6.5;
}

body.mobile-portrait .track .media-wrapper[data-format="C"] {
    width: calc(var(--col) * 5);
    aspect-ratio: 5 / 6.5;
}

body.mobile-portrait .track .media-wrapper[data-format="D"] {
    width: calc(var(--col) * 4);
    aspect-ratio: 4 / 6.5;
}

.media-wrapper:hover {
    cursor: pointer;
}

/* ============================================================
   TITLE
============================================================ */

.overlay-wrapper {
    position: absolute;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    pointer-events: none;
}

#title {
    font-family: "Fragment Mono", monospace;
    font-size: 11px;
    color: #000;
    text-transform: uppercase;
    text-decoration: none;
    pointer-events: auto;
}

#title:hover {
    letter-spacing: .5px;
}

#subtitle {
    display: none;
}

/* ============================================================
   PRELOADER
============================================================ */

#preloader {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    z-index: 9999;

    font-family: "Fragment Mono", monospace;
    font-size: 15px;
}

/* ============================================================
   UNDER CONSTRUCTION
============================================================ */

#under-construction {
    position: fixed;
    font-family: "Fragment Mono", monospace;
    font-weight: 400;
    font-size: 12pt;
    color: #000;
    z-index: 10;
    pointer-events: auto;
    text-decoration: none;
    cursor: pointer;

    left: 50%;
    bottom: 40px;
    transform: translateX(-50%);
}

.mobile-break {
    display: none;
}

.scroll-prompt {
    display: none;
}

@media (max-width: 600px) {

    #under-construction {
        left: auto;
        right: 20px;
        bottom: auto;
        top: 50%;
        transform: translateY(-50%);
        font-size: 10pt;
    }

    body.mobile-portrait #under-construction {
        right: 24px;
        text-align: right;
        font-size: 12px;
        line-height: 1.2;
    }

    body.mobile-portrait .under-construction-label {
        display: none;
    }

    body.mobile-portrait .scroll-prompt {
        display: inline;
    }

    .mobile-break {
        display: inline;
    }

}