main {
    div.header-image {
        --headerHeight: 550px;
        position: relative;

        img.header-image {
            height: var(--headerHeight);
            width: 100%;

            object-fit: cover;
            object-position: bottom;
        }   

        div.wrapper {        
            position: relative;

            img {
                position: absolute;
                top: calc(var(--headerHeight) / 6);
                right: 18px;

                height: calc(var(--headerHeight) - (var(--headerHeight) / 2.5));
                border: solid 1px var(--colourPrimary);
                border-radius: 18px;
                box-shadow: var(--defaultShadow);

                @media (max-width: 850px) {
                    top: calc(var(--headerHeight) / 3);
                    height: calc(var(--headerHeight) - (var(--headerHeight) / 2));
                }
            }
        }
    }

    div.usps {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        gap: 18px;
        align-items: stretch;

        div.usp {
            width: 400px;
            text-align: center;
            display: flex;
            flex-direction: column;

            h3 {
                font-size: 2.5rem;
            }

            img {
                height: 200px;
                aspect-ratio: 16/9;
                max-width: 350px;
                object-fit: cover;
                display: block;
                margin-left: auto;
                margin-right: auto;
                margin-bottom: 18px;
            }

            &.open-sessions {
                img {
                    object-position: top;
                }
            }

            p.description {
                margin-bottom: 18px;
                flex: 1;
            }

            a.button {
                margin-left: auto;
                margin-right: auto;
            }
        }
    }

    div.wrapper.events {
        max-width: 1000px;
        --cardGap: 36px;

        > div:not(.away-message) {
            display: flex;
            gap: var(--cardGap);
            align-items: flex-start;

            @media screen and (max-width: 1024px) {
                flex-direction: column;
            }
        }

        div.upcoming {
            display: flex;
            flex-direction: column;
            gap: var(--cardGap);
        }

        &:has(.away-message) {
            > *:not(.away-message) {
                display: none;
            }
        }
    }

    div.section.featured {
        &:not(:has(.featured-event)) {
            display: none;
        }
    }
}