#hero{
    overflow:visible;
    margin-top:8rem;
}
p.fadeout-subhead{
    font-size: 1.5em;
    text-align: right;
} 

#hero-offset .image-wrapper .thingie-wrapper{
    position:absolute;
        top:0;
        right:0;
        bottom:0;
        left:0;
    display:grid;
    grid-template-areas:
        "a b"
        "c d";
        z-index: 2;
}
p.fadeout-subhead{
    text-align:left;
}
#hero-offset .image-wrapper .thingie{
    flex: 0 1;
}
.thingie .circle{
    border-radius:50%;
    height:3rem;
    width:3rem;
    overflow: hidden;
}
.thingie .circle:not(:first-child){
    margin-left: -1rem;
}
.thingie h3{ color: #2c52bf; font-weight:700; font-size: 1rem;}
.thingie .icon{
    height:2rem;
    align-self:flex-start;
}
#hero-offset .image-wrapper .thingie.tl{ grid-area: a; margin: 1rem auto auto 1rem; }
#hero-offset .image-wrapper .thingie.tr{ grid-area: b; margin: 1rem 1rem auto auto; }
#hero-offset .image-wrapper .thingie.bl{ grid-area: c; margin: auto auto 1rem 1rem; }
#hero-offset .image-wrapper .thingie.br{ grid-area: d; margin: auto 1rem 1rem auto; }
.fadeout{
    background: linear-gradient( transparent, 90%, #030c2e);
    padding:6em 0;
    width:100%;
    text-align: right;
}
.infobox{
    max-width:300px;
}
.infobox > p{
    padding-left:1em;
    border-left: 1px solid white;
}
.image-wrapper-offset{
    margin-top:-24rem;
}
.fadeout h1{
  font-size: 3em;
  text-align: right;
}
.tiles.grid{
    display:grid;
    gap:1px;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr; 
}
#hero:not(.offset-img) .container > * {
    width:45%;
}
.infobox.quote {
    display: grid;
    grid-template-columns: repeat(4, auto);
    grid-template-rows:  repeat(2, max-content);
    grid-row-gap: 2em;
    grid-column-gap: 2em;
}
.infobox.quote{
    max-width:40%;
    transform: translateY(12em);
    margin-top:auto;
    z-index:2;
}
.infobox.quote .content { grid-area: 1 / 1 / 2 / 5; }
.infobox.quote .details { grid-area: 2 / 1 / 3 / 3; font-weight:700; display:flex; flex-direction:column;gap:0.5em; text-align:right; padding-right:2em; border-right: 1px solid #fff;}
.infobox.quote .avatar{ grid-area: 2 / 3 / 3 / 4; border-radius:50%; overflow:hidden;width:4em; height:4em; object-fit:contain;}
.infobox.quote .logo { grid-area: 2 / 4 / 3 / 5; max-height:2em; justify-self: center; min-width:180px; align-self:center;} 
.hero-footer{
    position:absolute;
        top:auto;
        left:calc( ( 100vw - 1280px ) / 2);
        right:auto;
        bottom:0;
    z-index:1;
    border-radius: .5rem .5rem 0 0;
}
.hero-footer-image{
    height:3rem;
}
@media only screen and (max-width: 1280px) { /* Laptops */
    #hero.fadeout{
        flex-direction:row;
        min-height: unset;
    }
   #hero.fadeout .container > *{
        width:unset;
    }
    .infobox.quote{
    max-width:80%;
    transform: unset;
    }
    .image-wrapper{
        width:50%;
    }
    .hero-footer{
        left:4rem;
    }
}
@media only screen and (max-width: 1024px) { /* Tablets */
    #hero:not(.offset-img) .container > * {
        width:unset;
    }
    #hero-offset .image-wrapper .thingie-wrapper{
        margin-top: auto;
        display: flex;
        top:auto;
        background:white;
    }
    #hero-offset .image-wrapper .thingie-wrapper .thingie{
        margin:unset;
        flex: 1;
        background:none;
        filter:none;
    }
    #hero:not(.offset-img) .container .image-wrapper img {
        position: absolute;
        z-index: -1; 
        top: 0;
        bottom: 0;
        left: auto;
        right: -240px;
        mask-image: linear-gradient(60deg, transparent 20%, black 60%);
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .image-wrapper-offset {
        margin-top: -8rem;
    }
    #hero > .container{
        flex-direction: column;
        gap:4em;
    }
    #hero-offset .image-wrapper.rel{
        position:absolute;
        top: 0;
        bottom: 0;
        left: auto;
        right: 0px;
    }
    #hero-offset .image-wrapper-offset{
        position:absolute;
        top: 0;
        bottom: 0;
        left: auto;
        right: 0px;
        mask-image: linear-gradient(30deg,transparent 30%,#000 70%);
    }
    :is(#hero, #hero-offset) .content-group{
        position:relative;
        z-index:1;
    }
} 
@media only screen and (max-width: 768px) { /* Phones */
    .image-wrapper-offset {
        margin-top: 0;
        height:100%;
    }
    #hero-offset :is(.image-wrapper.rel, .thingie-wrapper){
        position:static;
        margin-left: auto;
    }
    .thingie h3{
        text-align:left;
    }
    #hero-offset { padding-bottom:0;}
    #hero-offset .thingie-wrapper{
        margin: 2rem 2rem 0 auto;
        padding: 1rem 1rem;
        display:flex;
        width:100%;
        border-radius: 1rem 1rem 0 0;
    }
    #hero:not(.offset-img) .container .image-wrapper img {
        opacity: .5;
    }
    #hero:not(.offset-img){
        padding-bottom:0;
    }
    .hero-footer{
        flex-wrap:wrap;
        position:static;
        margin: 0 2rem;
        justify-content:space-around;
        gap:2rem;
    }
    #hero .btn-group .batons{
        justify-content: center;
        row-gap: 2em;
    }
    .fadeout h1 {
        margin-bottom: 1em;
    }
    #hero > .container{
        flex-direction: column;
        gap:4em;
    }
    #hero .container > * {
        width:100%;
        margin:auto;
    }
    .tiles.grid{
        grid-template-columns: repeat(1,1fr);
    }
    h1{ text-align:left;}
    #hero.fadeout{
        flex-direction:column;
        min-height: unset;
        gap:4em;
        padding: 2em 0 8em;
    }
    #hero.fadeout .btn-group{
        justify-content: center;
        margin: 3em 0;
    }
    .infobox{
        margin-top:unset;
        align-self:flex-end;
        max-width:280px;
    }
    .infobox.quote{
        grid-auto-flow: row;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(3,max-content);
        justify-items: center;
        text-align: center;
    }
    .infobox.quote .content,
    .infobox.quote .details,
    .infobox.quote .avatar,
    .infobox.quote .logo{
        grid-area:unset;
    }
    .infobox.quote .details{ order: 3 }
    .infobox.quote .avatar{ order: 2 }
    .infobox.quote .logo{ order: 4}
    .infobox.quote .details {
        padding:unset;
        text-align:center;
        border-right: none;
    }
}  

@media only screen and (max-width: 560px) { /* Phones */
    .image-wrapper-offset {
        margin-top: 0;
        height:100%;
        opacity:.5;
    }
  #hero-offset .batons{
    justify-content: space-around;
    width:100%;
  }
    #hero-offset h2 strong {
        color: #001466!important;
        font-size: 3.2rem!important;
        text-align:left;
    }
    .image-wrapper{
        width:100%;
    }
    #hero-offset :is(.image-wrapper.rel, .thingie-wrapper) {
        margin-top:1rem;
        margin-left: unset;
}