/* Banner */
#banner {
    align-items: center;
    display: flex;
    padding: 6em 0 2em;
    height: 60vh;
    margin-bottom: -3.25em;
    position: relative;
    top: -3.25em;
    max-height: 32em;
    min-height: 22em;
}

/* Overlay Effect */
#banner:after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(36, 41, 67, 0.54);
    z-index: 1;
    transition: opacity 2.5s ease 0.75s;
}

/* Banner Heading */
#banner h1 {
    font-size: 3.4em;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.7);
}

/* Inner Content */
#banner > .inner {
    position: relative;
    z-index: 2;
    padding: 0 !important;
    transition: opacity 1.5s ease, transform 0.5s ease-out;
}

#banner > .inner .content {
    display: flex;
    align-items: center;
    margin-bottom: 2em;
}

/* Simplified Element Styles */
#banner > .inner .content > * {
    margin: 0 1.5em 0 0;
}

#banner > .inner .content > :last-child {
    margin-right: 0;
}

#banner > .inner .content p {
    font-size: 0.7em;
    font-weight: 600;
    letter-spacing: 0.25em;
    text-transform: uppercase;
}

/* Major Banner Adjustments */
#banner.major {
    height: auto;
    max-height: 30em;
}

/* Preload Styles */
body.is-preload #banner:after {
    opacity: 1;
}

body.is-preload #banner > .inner {
    transform: translateX(-0.5em);
    opacity: 0;
}

/* Media Queries */
@media (max-width: 1280px) {
    #banner {
        background-attachment: scroll; /* Disable fixed attachment for smaller screens */
    }
}

@media (max-width: 736px) {
    #banner {
        padding: 5em 0 1em;
        margin-bottom: -2.75em;
        top: -2.75em;
        height: auto; /* Allow height to adjust dynamically */
    }

    #banner h1 {
        font-size: 2.5em;
        text-shadow: 0 2px 5px rgba(0, 0, 0, 0.7);
    }

    #banner > .inner .content {
        display: block; /* Stack content vertically */
    }

    #banner > .inner .content > * {
        margin: 0 0 2em;
    }
}

@media (max-width: 480px) {
    #banner {
        padding: 6em 0 2em;
    }

    #banner > .inner .content p br {
        display: none; /* Remove line breaks for small screens */
    }

    #banner.major {
        padding: 8em 0 4em;
    }
}