@keyframes fall {
     0% {
         transform: rotate(-90deg)
     }

     85% {
         transform: rotate(-0deg);
     }

     90% {
         transform: rotate(-11.5deg);
     }

     95% {
         transform: rotate(-0deg);
     }

     100% {
        transform: rotate(0deg);
     }
 }

 @keyframes hop {
     0% {
        transform: translate(0);
    }
    
    17% {
        /* x translate is 1/3rd of width.  */
        transform: translate(6ch, -3ch) rotate(11.25deg);
        transform-origin: bottom right;
     }

     34% {
        /* x translate=  2/3rd of amount moved + amount moved: (6 * .67) + 6 */
        transform: translate(10ch, 0) rotate(0);
    }
    
    51% {
        /* x translate=  2/3rd of amount moved + amount moved: (4 * 67 ) + 10*/
        transform: translate(12.68ch, -1.5ch) rotate(-5.625deg);
        transform-origin: bottom left;
    }
    
    68% {
        /* x translate=  2/3rd of amount moved + amount moved: (2.68 * .67 ) + 12.68*/
        transform: translate(14.4756ch, 0) rotate(0)
        
    }
    
    85% {
        /* x translate=  2/3rd of amount moved + amount moved: (1.7956 * .67 ) + 14.4756*/
        transform: translate(15.6786ch, -1.5ch) rotate(-1.25deg);
        transform-origin: bottom right;
     }

    100% {
        /* x translate=  2/3rd of amount moved + amount moved: (1.203 * .67 ) + 15.6786 */
        transform: translate(16.4846ch, 0) rotate(0)
     }

 }

@keyframes fadein {
     0% {
         color: rgba(0, 0, 0, 0.01);
     }

     100% {
         color: rgba(55, 55, 55, 1);
     }
 }

 * {
    padding: 0;
    margin: 0;
 }

 body {
    --gridRail: 10%;
    --sectionFlow: row;

    display: grid;
    grid-template-areas:
        "railP header railS" 
        "railP main   railS" 
        "railP footer railS";
    grid-template-rows: auto 1fr 10%;
    grid-template-columns: var(--gridRail) 1fr var(--gridRail);
    min-height: 100vh;
 }

 .g-header {
    display: grid;
    grid-template-rows: auto auto;
    grid-template-columns: 3;
    grid-area: header;
 }

.g-header__title {
     display: inline-block;
     font-size: clamp(var(--biggestTitleSize), 18vw, 120px);
     line-height: 1;
     padding: 5px 10px;
     border: 5px solid;
     margin: 0;
     transform-origin: bottom left;
     animation-name: fall;
     animation-duration: 1.3s;
     animation-timing-function: ease-in;
     animation-iteration-count: 1;
     animation-direction: linear;
 }

.g-header__subtitle {
     display: inline-block;
    font-family: var(--titleFontFamily);
    font-weight: var(--heaviestFontWeight);
    font-size: var(--bigTitleSize);
    line-height: var(--smallLineHeight);
    margin: 0;
    animation-name: hop;
    animation-duration: .4s;
    animation-timing-function: ease-in-out;
    animation-delay: 1.1s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;

 }

.g-main {
    grid-area: main;
}

 .g-footer {
     grid-area: footer;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: .618em;
     border-top: 1px solid #d8d8d8
 }

.g-main__title {
    font-size: clamp(var(--bigTitleSize), 3.5vmax, var(--biggestTitleSize));
}

 .g-main, .linkList, .linkList__link {
    animation-name: fadein;
    animation-duration: .75s;
    animation-timing-function: ease-in;
    animation-iteration-count: 1;
 }


 .linkList__title,
 .media__title {
    border-bottom: 4px solid var(--colorNeutralDark);
 }

 .linkList__link {
    animation-duration: 1.5s;
 }

@media screen and (width >= 980px) {
    .g-main {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        column-gap: var(--baseSpacingHorizontal);
    }

    .g-main__title {
        flex-basis: 100%;
    }

    .linkList,
    .media {
       flex-basis: 45%;
    }

    .image--holla {
        width: 10em;
        margin: 0 calc((100% - 10em) / 2);
    }
}