#hero {
    background: linear-gradient(to right, #fff 0, #fff 52%, #fff0 53%), url(../media/img/hero/metaphor_new_key_no_logo.jpg) 80% center / cover no-repeat;
    padding-top: 5em;
    padding-bottom: 5em;
}

#hero .logo-cta {
    flex-grow: 1;
    text-align: center;
    text-transform: uppercase;
    position:relative;
    width:50%;
    font-size:6px;
}

#hero .hero-logo {
    position: relative;
    animation-name: slide-from-bottom;
    animation-duration: .5s;
    animation-delay: 2s;
    animation-fill-mode: forwards;
    opacity: 0;
}

#hero a {
    position: relative;
    display: inline-block;
}

#hero .cta-btn {
    /* font-size: ; */
    position: relative;
    animation-name: fade-in;
    animation-duration: 2s;
    animation-delay: 2.5s;
    animation-fill-mode: forwards;
    opacity: 0;
}

#hero .release-date{
    padding: 1em;
    position: relative;
    animation-name: slide-from-bottom;
    animation-duration: .5s;
    animation-delay: 2s;
    animation-fill-mode: forwards;
    opacity: 0;
}

#hero .copy {
    position: relative;
    animation-name: fade-in;
    animation-duration: 2s;
    animation-delay: 2.5s;
    animation-fill-mode: forwards;
    opacity: 0;
}

#hero .keyart {
    width: 650px;
    max-width: 100%;
    margin: auto;
    animation-name: fade-in;
    animation-duration: 2s;
    animation-delay: 2.5s;
    animation-fill-mode: forwards;
    opacity: 0;
}

#hero #accolades,
#hero #accolades-tga{
    /* width: clamp(75px,80%.150px); */
    position: relative;
    animation-name: fade-in;
    animation-duration: 2s;
    animation-delay: 2.5s;
    animation-fill-mode: forwards;
    opacity: 0;
}

#hero .hero-flex{
    display:grid;
    grid-template-columns: 0.5fr 1fr 0.5fr;
    align-items: center;
}

#hero #accolades-tga {
    padding-left: 1em;
}

#hero #accolades {
    /* max-width: 50%; */
}

#hero #accolades img{
    /* width: clamp(75px, 80vw, 150px); */
    width: 75%;
}

#hero #accolades .accolades-tga{
    max-width: 45%;
    width: 600px;
    display: block;
    margin: auto;
}

#hero #accolades .accolades-meta{
    width: 200px;
    max-width: 15%;
    display: block;
    margin: auto;
}

#hero .page-break {
    position: absolute;
}

#hero .creators-copy {
    width: 80%;
    margin: 1em auto;
    animation-name: slide-from-left;
    animation-duration: 1s;
    animation-delay: 1s;
    animation-fill-mode: forwards;
    opacity: 0;
    position: relative;
}

#hero .creators-list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

#hero .creators-list .creator{
    position: relative;
    animation-name: slide-from-bottom;
    animation-duration: 1s;
    
    animation-fill-mode: forwards;
    opacity: 0;
}

#hero .creators-list .creator:nth-child(1){
    animation-delay: 1.5s;
}
#hero .creators-list .creator:nth-child(2){
    animation-delay: 1.6s;
}
#hero .creators-list .creator:nth-child(3){
    animation-delay: 1.7s;
}

#hero .hero-logos{
    padding: 2em 0;
    animation-name: fade-in;
    animation-duration: 2s;
    animation-delay: 2.5s;
    animation-fill-mode: forwards;
    opacity: 0;
}
#hero .hero-logos img {
    margin: 10px;
    height: clamp(10px, 1.5vw, 26px);
}

@media screen and (min-width: 768px) {
    #hero {
        padding-bottom: 0;
    }

    #hero .wrapper {
        display: grid;
        grid-template-columns: 50% 50%;
        position:relative;
    }

    #hero .logo-cta {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
        width: 100%;
        font-size:unset;
    }
    #hero .keyart {
        grid-column: 2 / 3;
        grid-row: 1 / 6;
    }

    
}
@media screen and (min-width:1600px){
    /* #hero #accolades{
        position:absolute;
        top: 50%;
    } */
}