/* =====================================================
   ACUMIN VARIABLE CONCEPT
====================================================== */

@font-face {

    font-family:
        "Acumin Variable Concept";

    src:
        url("fonts/Acumin-Variable-Concept.woff2")
        format("woff2");

    font-weight:
        100 900;

    font-style:
        normal;

    font-display:
        swap;
}


/* =====================================================
   RESET
====================================================== */

* {

    margin: 0;
    padding: 0;

    box-sizing: border-box;
}


html,
body {

    width: 100%;
    height: 100%;

    overflow: hidden;
}


body {

    background: #1d1d1d;

    color: #000;

    font-family:
        "Source Code Pro",
        monospace;
}


/* =====================================================
   MAIN FRAME
====================================================== */

.frame {

    position: fixed;

    inset: 4px;

    background: #fff;

    overflow: hidden;

    border-radius: 2px;
}


/* =====================================================
   TWO COLUMNS
====================================================== */

.columns {

    width: 100%;
    height: 100%;

    display: grid;

    grid-template-columns:
        46% 54%;

    overflow: hidden;
}


/* =====================================================
   LEFT
====================================================== */

.left {

    position: relative;

    height: 100%;

    overflow: hidden;

    padding:
        0 20px;
}


/* =====================================================
   PROJECT WINDOW
====================================================== */

.project-window {

    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;
}


/* =====================================================
   PROJECT TRACK
====================================================== */

.project-track {

    position: absolute;

    top: 0;

    width:
        calc(50% - 7.5px);

    display: flex;

    flex-direction: column;

    gap: 30px;

    will-change:
        transform;
}


/* LEFT */

.track-left {

    left: 0;
}


/* RIGHT */

.track-right {

    right: 0;
}


/* =====================================================
   PROJECT
====================================================== */

.project {

    width: 100%;

    flex-shrink: 0;
}


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

.project-title {

    font-family:
        "Source Code Pro",
        monospace;

    font-size: 15px;

    font-weight: 400;

    line-height: .95;

    letter-spacing: -1px;

    margin-bottom: 5px;
}


/* =====================================================
   IMAGE
====================================================== */

.project-image {

    width: 100%;

    aspect-ratio: 1 / 1;

    background: #d8d8d8;

    overflow: hidden;
}


.project-image img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    transition:
        transform .5s ease;
}


.project:hover
.project-image img {

    transform:
        scale(1.03);
}


/* =====================================================
   PROJECT META
====================================================== */

.project-meta {

    display: flex;

    justify-content: space-between;

    margin-top: 7px;

    font-family:
        "Source Code Pro",
        monospace;

    font-size: 8px;

    line-height: 1;
}


/* =====================================================
   RIGHT FIXED COLUMN
====================================================== */

.right {
    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;

    background: #fff;

    padding: 20px 16px 20px 16px;
}


/* =====================================================
   BEETLEBUM WINDOW
====================================================== */

.headline-window {
    position: relative;
    width: 100%;
    height: 155px;

    overflow: hidden;

    margin: 0 0 12px 0;

    padding: 0;
}

/* =====================================================
   BEETLEBUM
====================================================== */

.headline {
    position: absolute;

    top: 0;
    left: 0;

    margin: 15;
    padding: 0;

    white-space: nowrap;

    font-family:
        "Acumin Variable Concept",
        "Helvetica Neue",
        Arial,
        sans-serif;

    font-size: 138px;

    font-weight: 400;

    line-height: .85;

    letter-spacing: -7px;

    color: #000;

    animation:
        beetlebumMove
        7s
        ease-in-out
        infinite
        alternate;
}

/* =====================================================
   BEETLEBUM ANIMATION
====================================================== */

@keyframes beetlebumMove {

    0% {

        transform:
            translateX(-250px);

    }

    50% {

        transform:
            translateX(-80px);

    }

    100% {

        transform:
            translateX(20px);

    }

}


/* =====================================================
   DESCRIPTION
====================================================== */

.description {
    width: 100%;

    margin:
        0
        0
        16px
        0;

    padding: 0;

    font-family:
        "Source Code Pro",
        monospace;

    font-size: 9px;

    font-weight: 400;

    line-height: 1.18;

    letter-spacing: 0;

    color: #000;
}


/* =====================================================
   MAIN HERO IMAGE
====================================================== */

.hero-image {
    position: relative;

    width: 100%;

    aspect-ratio: 550 / 305;

    margin: 0;

    padding: 0;

    background: #d8d8d8;

    overflow: hidden;
}

/* =====================================================
   HERO IMAGE
====================================================== */

.hero-image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    opacity: 1;

    transition:
        opacity .35s ease;
}


/* =====================================================
   PROJECT INFORMATION
====================================================== */

.project-info {
    width: 100%;

    display: flex;

    justify-content: space-between;

    margin:
        8px
        0
        0
        0;

    padding: 0;

    font-family:
        "Source Code Pro",
        monospace;

    font-size: 8px;

    line-height: 1;

    color: #000;
}