main
    &.team
        & > article
            transform translateX(100vw)
            transition transform 0.3s linear

            &.-is-selected
                transform translateX(0vw)

        & ^[1..1]-competition
            @extend .full-w, .layout-col

        & ^[1..1]-filter
            @extend .full-w
            border-bottom 1px solid rgba(color-primary-dark, 50%)
            padding 1.125rem 0

            &-list
                @extend .center-h
                align-self center
                flex-wrap wrap
                gap 0.5rem
                max-width 100rem
                width inherit
            
            &-tag
                cursor pointer
                height 1.75rem
        
        & ^[1..1]-last-result, & ^[1..1]-next-match
            @extend .full-w, .layout-col
            border-top 1px solid color-accent-dark
            font-size 0.875rem
            margin-top 2rem
            padding-top 1rem

            & ^[2..2]-away, & ^[2..2]-home
                @extend .baseline-content
                gap 1rem
                padding-top 0.5rem

            & ^[2..2]-category
                margin 0.5rem 0
            
            & ^[2..2]-info
                flex-wrap wrap
                gap 0.5rem
                margin-top 1rem
            
            & ^[2..2]-score, & ^[2..2]-team
                @extend .font-alt-bold-upper
                font-size @css{clamp(2rem, 2.5vw + 1.5rem, 2.5rem)}
                line-height 1
                padding 0.25rem 0.5rem
            
            & ^[2..2]-score
                margin-left auto

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

                &.-is-lost
                    background-color color-lost

                &.-is-won
                    background-color color-won

            & ^[2..2]-team
                display: inline-block
                overflow hidden
                text-overflow ellipsis
                white-space nowrap
        
        & ^[1..1]-match
            @extend .full-w, .layout-col
            border 1px solid rgba(color-text, 25%)

            & ^[2..2]-away, & ^[2..2]-home
                align-items baseline
                gap 0.5rem

            & ^[2..2]-date, & ^[2..2]-location, & ^[2..2]-team
                display inline-block
                overflow hidden
                text-overflow ellipsis
                white-space nowrap

            & ^[2..2]-date, & ^[2..2]-location
                color color-primary
                font-size 0.75rem

            & ^[2..2]-info, & ^[2..2]-stat, & ^[2..2]-teams
                padding 0.5rem
            
            & ^[2..2]-info, & ^[2..2]-stat
                gap 0.5rem

            & ^[2..2]-info
                @extend .layout-col
            
            & ^[2..2]-stat, & ^[2..2]-teams
                @extend .layout-col

            & ^[2..2]-stat
                @extend .center-content-v
            
            & ^[2..2]-score, & ^[2..2]-team
                @extend .font-alt-bold-upper
                font-size 1.5rem
                line-height 1.2

            & ^[2..2]-score
                @extend .center-content-h
                min-width 1.75rem
                padding 0.25rem 0.5rem

                &.-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 0.75rem
                        font-weight 100
                        margin-left 0.25rem

                &.-is-penalties
                    font-weight 100

                &.-is-won
                    background-color color-won
            
            & ^[2..2]-scores
                margin-left auto

        & ^[1..1]-matches
            @extend .full-w, .layout-col
            gap 1rem
            margin-top 6rem

            &^[2..2]-competition
                border-top 1px solid color-accent-dark
                margin-top 2rem
                padding-top 1rem

        & ^[1..1]-news
            @extend .layout-row-wrap
            gap 1.5rem
            margin-top 2rem

        & ^[1..1]-planning
            flex-wrap wrap
            gap 8%

        & ^[1..1]-ranking
            @extend .font-prim-upper
            border-bottom 1px solid rgba(color-text, 15%)
            height 4rem

            &.-is-club
                @extend .font-prim-bold-upper
                background-color color-primary
                color color-accent
            
            & td:not(^[2..2]-club)
                @extend .center-text-h
                min-width 4rem
            
            ^[0..1] ^[2..2]-club
                width 100%

            ^[0..1] ^[2..2]-conceded, ^[0..1] ^[2..2]-draw, ^[0..1] ^[2..2]-lost, ^[0..1] ^[2..2]-played, ^[0..1] ^[2..2]-scored, ^[0..1] ^[2..2]-withdrawal, ^[0..1] ^[2..2]-won
                display none

            ^[0..1] ^[2..2]-container
                @extends .layout-col
                border-collapse collapse
                border-top 1px solid color-accent-dark
                margin 2rem 0
                padding-top 1rem
            
            ^[0..1] ^[2..2]-header
                border-bottom 1px solid rgba(color-text, 15%)
                color rgba(color-text, 25%)
                font-weight normal
                height 3rem

                & th
                    min-width 3rem

                ^[0..1] ^[2..2]-header
                    &-conceded, &-draw, &-lost, &-played, &-scored, &-withdrawal, &-won
                        display none

        & ^[1..1]-squad
            @extend .layout-col
            margin-top 2rem

            & ^[2..2]-picture
                @extend .full-w
                aspect-ratio 16 / 9
                background-color color-primary-dark
                //max-height 30rem
                overflow hidden

                & picture
                    @extends .full-h, .full-w
                
                & ^[3..3]-heading
                    @extend .center-text-h, .font-alt-bold-upper
                    color color-accent
                    display inline-block
                    font-size 2rem
                    left 50%
                    overflow hidden
                    position absolute
                    text-overflow ellipsis
                    top 50%
                    transform translate(-50%,-50%)
                    white-space nowrap

            & ^[2..2]-player
                width 50%

            & ^[2..2]-players, & ^[2..2]-stats, & ^[2..2]-trainer, & ^[2..2]-training
                @extend .full-w, .layout-col
                border-top 1px solid color-accent-dark
                padding-top 1rem

            & ^[2..2]-players, & ^[2..2]-stats, & ^[2..2]-training
                margin-top 2rem
                row-gap 1rem
            
            & ^[2..2]-players
                &-list
                    @extend .layout-row-wrap
                    row-gap 1rem
            
            & ^[2..2]-stats
                &-container
                    @extend .center-content-h, .layout-row-wrap
                    row-gap 3rem
                
                &-conceded, &-draw, &-lost, &-scored, &-won
                    @extend .center-content, .font-alt-bold-upper, .layout-col
                    color color-text-alt
                    font-size 6rem
                    line-height 1.2
                    width 100%

                    & > div
                        @extend .center-text-h
                        font-size 1rem
                
                &-draw
                    color rgba(color-text, 25%)

                &-conceded, &-lost
                    color color-lost

                &-scored, &-won
                    color color-won

            & ^[2..2]-summary
                @extend .full-w, .layout-row-wrap
                gap 2rem
                margin 0 auto
                max-width 108rem
            
            & ^[2..2]-trainer
                row-gap 0.5rem

                & h2:nth-of-type(2)
                    margin-top 1.5rem

            & ^[2..2]-training
                &-content
                    @extend .layout-col
                
                &-info
                    @extend .layout-row-wrap
                    gap 0.5rem
                    margin-top 1rem
                
                &-picture
                    @extend .full-w
                    aspect-ratio 16 / 9
                    max-height 30rem
                    overflow hidden

                    & picture
                        @extends .full-h, .full-w
                
                &-pictures
                    @extend .full-w, .layout-row-wrap
                    gap 1.5rem


        & ^[1..1]-title
            @extend .font-alt-bold
            color color-primary
            font-size 1.5rem
            line-height 1
            margin-bottom 0.5rem


@media (min-width 480px)
    main
        &.team
            & ^[1..1]-match
                & ^[2..2]-info
                    flex-direction row

                & ^[2..2]-location
                    margin-left auto

            & ^[1..1]-squad
                & ^[2..2]-stats
                    &-conceded, &-draw, &-lost, &-scored, &-won
                        font-size clamp(4rem, 20vw - 2rem, 6rem)
                        margin 0 1.5rem
                        width calc(33% - 3rem)

@media (min-width 768px)
    main
        &.team
            & ^[1..1]-ranking
                ^[0..1] ^[2..2]-conceded, ^[0..1] ^[2..2]-draw, ^[0..1] ^[2..2]-lost, ^[0..1] ^[2..2]-played, ^[0..1] ^[2..2]-scored, ^[0..1] ^[2..2]-withdrawal, ^[0..1] ^[2..2]-won
                    display table-cell

                ^[0..1] ^[2..2]-header
                    &-conceded, &-draw, &-lost, &-played, &-scored, &-withdrawal, &-won
                        display table-cell

            & ^[1..1]-squad
                & ^[2..2]-player
                    width 33%
                
                & ^[2..2]-training
                    &-picture
                        max-width calc(50% - 0.75rem)


@media (min-width 1024px)
    main
        &.team
            & ^[1..1]-match
                flex-direction row

                & ^[2..2]-info
                    border-right 1px solid rgba(color-text, 25%)
                    flex-direction column
                    max-width 15rem
                    width 25%
                
                & ^[2..2]-location
                    margin-left 0
                
                & ^[2..2]-stat
                    border-left 1px solid rgba(color-text, 25%)
                    margin-left auto
                    max-width 17rem
                    width 30%
                
                & ^[2..2]-teams
                    margin 0 auto
                    padding 0.5rem 1rem
                    width 45%

            & ^[1..1]-squad
                & ^[2..2]-player
                    width 25%


@media (min-width 1280px)
    main
        &.team
            & ^[1..1]-last-result, & ^[1..1]-next-match
                max-width 46%
            
            & ^[1..1]-squad
                & ^[2..2]-picture
                    width calc(100% - 22rem)
                
                & ^[2..2]-trainer
                    width 20rem

                & ^[2..2]-stats
                    &-conceded, &-draw, &-lost, &-scored, &-won
                        width calc(20% - 3rem)