header
    @extends .layout-col
    background linear-gradient(0deg, rgba(color-text, 0%), rgba(color-text, 50%))
    background-position center
    background-repeat no-repeat
    background-size cover
    height @css{clamp(13rem, 65vw, 25.75rem)}

    & .flickity
        &-button
            background transparent
            border 1px solid color-accent
            bottom 1.5rem
            height 2rem
            top auto
            width 2rem

            &:focus
                box-shadow none

            &:hover
                background transparent

            &.next
                right 3.75rem

            &.previous
                left auto
                right 6.5rem

            &-icon
                fill color-bg

        &-page-dots
            bottom 1rem
            right 3rem
            width 6.25rem

            & .dot
                background-color rgba(color-bg, 50%)
                height 0.75rem
                margin 0 0.25rem
                opacity 1
                width @height

                &.is-selected
                    background-color color-accent

    & .&-gradient, & .&-picture
        @extend .full-h, .full-w
        left 0
        position absolute
        top 0
        
    & .&-gradient
        background linear-gradient(rgba(color-text, 0), rgba(color-text, 70%))

    & .&-breadcrumbs
        @extend .center-content-v
        gap 0.5rem
        height 3rem

        &-item
            color color-text-alt
            font-size 0.75rem
            height 1rem

            &:before
                color inherit
                content '>'
                margin-right 0.5rem

            &.-is-current
                color color-accent

            &.-is-home
                &:before
                    background-image url(cdn_server + 'images/img-logo.svg')
                    background-position center
                    background-repeat no-repeat
                    background-size cover
                    content ""
                    height 1rem
                    width @height

    & .&-calendar
        @extend .center-content-v, .layout-col
        background linear-gradient(0deg, rgba(color-text, 50%), rgba(color-text, 50%)), url(cdn_server + "images/img-calendar-bg.webp")
        background-position center
        background-repeat no-repeat
        background-size cover
        color color-text-alt
        font-size 0.875rem
        height 19rem

        &-title
            font-size inherit
            height 4.5rem
            padding-top 1.5rem
        
        &-match
            @extend .center-content-v, .full-w, .layout-col
            display none
            gap 0.75rem
            min-height calc((100% - 4.5rem) / 2)

            &:first-of-type
                display flex

            &-away, &-home
                @extend .center-content-v, .font-alt-bold-upper
                color inherit
                font-size 1.75rem 
                line-height 1

                &.-is-club
                    color color-accent

            &-location, &-date
                font-size inherit

            &-category
                color rgba(color-text-alt, 50%)
                font-size inherit
                height 1.5rem

            &-teams
                @extend .center-content, .layout-col
                background-color rgba(color-text, 50%)
                gap 8px
                height 6rem
                padding 0 1rem
                width 100%

    & .&-container
        @extend .center-h, .full-h, .full-w, .layout-col
        max-width 108rem
        padding 0 @css{clamp(1.5rem, 5.68vw + 0.36rem, 4rem)}

    & .&-news
        background-color color-primary
        display block
        flex-wrap wrap
        height 24rem

        &-ellipsis
            color inherit
            font-size inherit
            gap 1rem
            height 2.5rem
            max-width 37rem

            &-content
                color inherit
                display block
                font-size inherit
                line-height 1.4

            &-icon
                @extend .baseline-content, .center-content-h
                background-color color-accent
                color color-primary-dark
                display flex
                font-size 2rem
                height inherit
                min-width 2.5rem

        &-heading, &-title
            @extend .font-alt-bold-upper
            background-color rgba(color-text, 50%)
            display inline-block
            font-size @css{clamp(1.5rem, 3.41vw + 0.82rem, 4rem)}
            line-height 1
            max-width 100%  
            overflow hidden
            text-overflow ellipsis
            white-space nowrap
            width fit-content

        &-heading
            color color-accent-dark
            padding 0.5rem @css{clamp(0.5rem, 2vw, 1rem)} 0  @css{clamp(0.5rem, 2vw, 1rem)}

        &-item
            @extend .full-h, .full-w, .layout-col
            background-position center !important
            background-size cover !important
            color color-text-alt
            font-size 0.875rem
            justify-content end
            overflow hidden
            padding 2.5rem @css{clamp(1rem, 5vw, 2rem)}

        &-title
            color inherit
            margin-bottom 1rem
            padding 0.5rem @css{clamp(0.5rem, 2vw, 1rem)}

    & .&-social
        @extend .full-w
        background-color color-primary-dark
        height 3rem

        &-item
            @extend .center-content, .full-h
            color color-accent-dark
            transition all 0.3s linear
            width 3rem

            &:hover
                background-color color-accent-dark
                color color-primary-dark

        &-icon
            color inherit

    & .&-title
        @extend .font-alt-bold-upper
        background-color rgba(color-text, 50%)
        color color-text-alt
        display inline-block
        font-size @css{clamp(2.5rem,7.14vw + 1.07rem,4.5rem)}
        line-height 1
        margin auto 0 1rem 0
        max-width 100%  
        overflow hidden
        padding 0.5rem @css{clamp(0.5rem, 2vw, 1rem)}
        text-overflow ellipsis
        white-space nowrap
        width fit-content

    &.index
        @extend .layout-col-wrap
        height 46rem


@media (min-width: 640px)
    header
        & .&-calendar
            &-match
                width calc(100% - 2rem)

        & .&-news
            &-title
                margin-bottom 1.5rem
        
        & .&-title
            margin-bottom 1.5rem

@media (min-width: 768px)
    header
        & .&-calendar, & .&-news
            height @css{clamp(27rem, 57vw, 38.75rem)}
        
        & .&-calendar
            width @css{clamp(20rem, 42vw, 30rem)}

            &-match
                display flex
                gap @css{clamp(0.5rem, 1.56vw + 0.25rem, 0.75rem)}

                &-category
                    height @css{clamp(1rem, 2.34vw - 0.125rem , 1.75rem)}
                
                &-teams
                    height @css{clamp(4.5rem, 9.375vw, 7.5rem)}

                &-away, &-home
                    font-size @css{clamp(1.5rem, 3.125vw, 2.5rem)}

        & .&-news
            width calc(100% - @css{clamp(20rem, 42vw, 30rem)})

        &.index
            flex-direction row
            height @css{clamp(30rem, 60vw, 41.75rem)}


@media (min-width: 1024px)
    header
        & .&-news
            &-heading, &-title
                font-size @css{clamp(3rem, 7.69vw - 1.92rem, 5rem)}