.titleContainer {
    --logoLarge: 18rem;
}
main {
    margin-bottom: 0;
    background-color: var(--neutralLight);
}
article {
    font-size: 1.2rem;
    width: 60%;
    margin: 0 auto;
    margin-bottom: 8rem;
}
section p {
    display: inline;
}
video {
   width: 100vw;
   height: 100vh;
   object-fit: cover;
   position: fixed;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   z-index: -2;
}
.videoContainer img {
    display: none;
}
#home4b .logo-nav,
#home4d .logo-nav {
    border-color: var(--mainDark);
}
.logo-nav-top {
    background-color: var(--mainDark);
    position: sticky;
    top: 0;
}
.titleVideo {
    height: 100vh;
    display: flex;
    align-items: center;
}
.titleContainer {
    display: grid;
    flex: 1;
    grid-template-areas:
        "logoContainer name"
        "logoContainer details"
        "logoContainer newsletter";
    grid-template-columns: auto 1fr;
    position: relative;
    text-align: center;
    min-height: var(--logoLarge);
}
.videoContainer {
    display: inline; /*THE GS TEXT EDITOR WRAPS THE VIDEO TAG IN <P> TAGS - KILLS MARGINS*/
}
.name {
    font-size: 4rem;
    font-weight: 900;
    padding: 2rem 0;
    grid-area: name;
}
.details {
    grid-area: details;
}
.newsletter {
    grid-area: newsletter;
}
.name {
    text-shadow: 1px 1px 1px var(--neutralLight);
}
.name,
.details,
.newsletter {
    margin: 0;
    background-color: rgba(255, 255, 255, .5);
}
.logoContainer {
    grid-area: logoContainer;
    position: absolute;
    background-color: transparent;
    top: 0;
    z-index: 2;
}

.logo {
    width:  var(--logoLarge);
    height:  var(--logoLarge);
}
.details,
.newsletter {
    font-size: 1.3rem;
    padding-bottom: 2rem;
    font-weight: bold;
}
.newsletter a {
    color: inherit;
}
@media only screen and (max-width: 1400px) {
    .titleContainer {
        --logoLarge: 16rem;
    }
}
@media only screen and (max-width: 1335px) {
    .titleContainer {
        --logoLarge: 14rem;
    }
    .logoContainer {
        --position: 1rem;
        top: var(--position);
    }
}
@media only screen and (max-width: 1270px) {
    .titleContainer {
        --logoLarge: 11rem;
    }
    .logoContainer {
        --position: 2rem;
    }
}
@media only screen and (max-width: 1125px) {
    .hiddenBreak {
        display: block;
    }
    .logoContainer {
        --position: 3rem;
    }
}
@media only screen and (max-width: 1040px) {
    article {
        width: 80%;
    }
 }
@media only screen and (max-width: 900px) {
    .titleContainer {
        text-align: right;
    }
    .name,
    .details,
    .newsletter {
        padding-right: 1rem;
    }
 }
 @media only screen and (max-width: 810px) {
     .logoContainer {
        --position: 5rem;
    }
 }
 @media only screen and (max-width: 750px) {
    .hiddenBreak750 {
        display: block;
    }
    .logoContainer {
        --position: 6rem;
    }
 }
 @media only screen and (max-width: 670px) {
    .hiddenBreak670 {
        display: block;
    }
    .logoContainer {
        --position: 4rem;
    }
 }
@media only screen and (max-width: 600px) {
    article {
        width: 95%;
    }
 }
@media only screen and (max-width: 480px) {
    video {
        display: none;
    }
    .videoContainer img {
        display: block;
        width: 100vw;
        height: 100vh;
        object-fit: cover;
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: -2;
    }
 }
@media only screen and (max-width: 435px) {
    .titleContainer {
        --logoLarge: 8rem;
    }
 }
@media only screen and (max-width: 390px) {
    .logoContainer {
        --position: -7rem;
        z-index: 5;
    }
    .titleContainer {
        text-align: center;
    }
 }