header
    &.match
        height 3rem

main
    &.match
        @extend .center-content-v
        max-width none
        padding 0

        & ^[1..1]-away, & ^[1..1]-home
            @extend .center-content-v, .layout-col
            row-gap 1rem
        
        & ^[1..1]-away
            margin-bottom 3rem

        & ^[1..1]-colors
            @extend .full-w
            height 0.75rem
        
        & ^[1..1]-header
            @extend .full-w
            padding 2rem 0

            &-container
                @extend .center-content-v, .full-w, .layout-col
                background-color rgba(color-bg, 60%)

            &-picture
                @extend .full-h, .full-w
                background linear-gradient(0deg,rgba(0,37,79,.5),rgba(0,37,79,.5)),url(https://static.us4monts.football/images/img-match-header.webp)
                background-size cover
                left 0
                opacity 0.85
                position absolute
                top 0

        & ^[1..1]-home
            margin-top 3rem

        & ^[1..1]-info
            flex-wrap wrap
            gap 0.5rem
            row-gap 1rem

            &:first-of-type
                @extend .center-content-v, .layout-col
                margin-top 2rem
        
            &:last-of-type
                @extend .center-content
                margin-bottom 1.5rem

        & ^[1..1]-map
            @extend .full-w
            height 20rem

        & ^[1..1]-score, & ^[1..1]-team
            @extend .font-alt-bold-upper
            font-size @css{clamp(1.5rem, 7.95vw + 0.09rem, 5rem)}
            line-height 1
        
        & ^[1..1]-score
            color rgba(color-text, 70%)
            padding clamp(0.5rem, 2vw, 1rem) 1rem

            &.-is-lost, &.-is-won
                color color-text-alt

            &.-is-lost
                background-color color-lost
            
            &.-is-overtime
                min-width 2.75rem

                &:after
                    align-self center
                    content 'ap'
                    font-size @css{clamp(0.75rem, 7.95vw + 0.09rem, 2.5rem)}
                    font-weight 100
                    margin-left 0.25rem

            &.-is-penalties
                font-weight 100

            &.-is-won
                background-color color-won
        
        & ^[1..1]-team
            display block
            max-width 95%
            overflow hidden
            padding 0 2rem
            text-overflow ellipsis
            white-space nowrap