main {
    position:relative;
    background-color:#000;
    overflow-x:clip;
}

.hero {
    position: relative;
    background-color:#fff;
    border-right:solid var(--padding) #000;
    height:calc(var(--padding_x2) + 36px);
}

.nigel {
    position:fixed;
    height:100vh;
    top:0;
    right:var(--padding);
    z-index:4;
}

.media {
    position: relative;
    z-index:5;
    padding:5rem var(--padding_x2);
    width:75%;
    overflow-x:clip;

    & h1 {
        position: relative;
        z-index:2;
        font-size:clamp(4rem,18cqw,18cqw);
        margin:0 0 2rem 0;
    }
}

.line1 {
    position:absolute;
    right: var(--padding);
    width: var(--padding);
    height:100%;
    top:0;
    z-index:1;
    border-left:1px solid var(--orange);
    border-right:1px solid var(--orange);
}

h2 {
    font-size:3rem;
    color:#fff;
    margin-bottom:1lh;
}

.gallery {
    display:grid;
    grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
    gap:0.5rem;
    grid-auto-flow: dense;
    grid-auto-rows: 200px;
    margin-bottom:3rem;

    & a {
        border:1px solid var(--orange);
        & img {
            width:100%;
            height:100%;
            object-fit:cover;
            transition: filter 0.5s ease-out;
        }

        &:hover {
            border:1px solid #fff;
        }
        
        &:hover img {
            filter:brightness(2);
        }
    }

    & .tall {
        grid-row: span 2;
    }
    
    & .wide {
        grid-column: span 2;
    }
}

.videos {
    display:grid;
    grid-template-columns: repeat(auto-fit,minmax(600px,1fr));
    gap:0.5rem;
    grid-auto-flow: dense;
    margin-bottom:3rem;
}

.video {
    max-width:100%;
    position:relative;
    max-height: calc(100vh - 100px);
    

    & video {
        display:block;
        width:100%;
        margin:1em 0;
        border:1px solid var(--orange);

        &:hover {
            border:1px solid #fff;
        }
    }

    & p {
        display:none;
    }

    & .video-placeholder {
        padding-bottom: 56.25%;
        max-height:calc(100vh - 100px);
    }

    & .cover {
        position:absolute;
        width:100%;
        height:100%;
        z-index:2;
        background-color:var(--background);
        
        &.external {
            position:static;
        }

        border:1px solid var(--orange);
        &:hover {
            border:1px solid #fff;
        }

        & > img {
            object-fit: cover;
            width:100%;
            height: 100%;
        } 

        & button,
        & a{
            position:absolute;
            left:50%;
            top:50%;
            transform:translate(-50%, -50%);
            width:clamp(4rem,10%,12rem);
            z-index:3;
            background:none;
            outline:none;
            border:none;
            filter:drop-shadow(0 0 10px #000);

            & img {
                width:100%;
            }

            &:hover {
                filter:brightness(10);
            }
        }

        & p {
            position:absolute;
            z-index:3;
            display:block;
            color:var(--orange);
            text-shadow:0 0 10px #000;
            font-size:1.8rem;
            left:2rem;
            top:2rem;
            margin:0;
            text-align:left;
            max-width:calc(100% - 4rem);
            line-height:1.1;
            pointer-events: none;
        }
    }
}

.articles {
    display:grid;
    gap:0.5rem;

    & a {
        display:grid;

        &:has(img){
            grid-template-columns: 200px 1fr;
            gap:1rem;

            & img {
                border:1px solid var(--orange);
            }
        }

        & h3 {
            font-size:2rem;
            margin-bottom: 0;
        }

        & p {
            color:#fff;
        }

        &:hover {

            & img {
                border-color:#fff;
            }

            & h3 {
                color:#fff;
            }
        }
        
    }
}

.testimonials {
    position: relative;
    z-index:5;
}

footer {
    background-color:#000;
}

footer > * {
    position:Relative;
    z-index:5;
}

@media screen and (max-width:1100px){
    .media {
        width:85%;
        padding-inline:var(--padding);
    }

    .nigel {
        right:calc(var(--padding) * -1);
    }
}

@media screen and (max-width:800px){
    .gallery {
        grid-template-columns: 1fr;
        grid-auto-rows: unset;

        & .tall {
            grid-row:unset;
        }

        & .wide {
            grid-column: unset;
        }
    }

    .videos {
        grid-template-columns:1fr;
    }

    .nigel {
        width:100%;
        height:100%;
        object-fit:cover;
        object-position: right;
        scale:-1 1;
        right:unset;
        left:70vw;
        z-index:2;
    }

    .articles {
        & a {
            &:has(img){
                grid-template-columns: 1fr;
            }
        }
    }
}

@media screen and (max-width:600px){
    .media {
        width:100%;
    }
    
    .nigel {
        left:60vw;
    }
}