@import '../_common';
@import '../../sass/sport-facilities/sport'
p
  text-align: justify 
.banner
  &::before
    background: linear-gradient(270deg, rgba(0, 0, 0, 0) 31.86%, rgb(0 0 0 / 0%) 92.33%), linear-gradient(360deg, rgba(0, 0, 0, 0) 37%, rgb(0 0 0 / 55%) 100%), linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2))
    @include respond-to(screen-991)
      background: linear-gradient(270deg, rgba(0, 0, 0, 0) 31.86%, rgb(0 0 0 / 0%) 92.33%), linear-gradient(360deg, rgba(0, 0, 0, 0) 37%, rgb(0 0 0 / 55%) 100%), linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2))
    
  .bg
    img
      object-fit: cover
      object-position: center
    .banner-wrapper.banner2
      left: 2%
      @include respond-to(screen-991)
        left: 50%
        top: 50%
        transform: translate(-50% , -50%)
      @include respond-to(screen-768)
         width: 70%
      @include respond-to(screen-540)
         width: 80%
      @include respond-to(screen-420)
         width: 100%
      
      .container-fluid
        .flex
          .colA
            width: 30%
            @include respond-to(screen-1784)
              width: 40%
            @include respond-to(screen-1536)
              width: 45%
            @include respond-to(screen-1366)
              width: 50%
            @include respond-to(screen-991)
              width: 100%
              text-align: center
    

            p
              color: var(--white)
              font-size: 16px
              text-align: left
              @include respond-to(screen-991)
                text-align: center

            h4
              color: var(--white)
              margin-top: 24px
              font-size: 2rem
              line-height: 1.3
              @include respond-to(screen-1366)
                font-size: 26px
              @include respond-to(screen-991)
                margin-top: 14px
              @include respond-to(screen-540)
                font-size: 2rem
              @include respond-to(screen-420)
                font-size: 1.5rem
              

            img
              width: 30px
              display: inline-block
              margin-top: 80px
              @include respond-to(screen-991)
                margin-top: 30px

.hall-detail-secA
  display: grid
  grid-template-columns: repeat(3, 1fr)
  gap: 130px
  margin: 80px 0 100px
  position: relative

  @include respond-to(screen-1536)
    gap: 65px

  @include respond-to(screen-1024)
    gap: 45px

  @include respond-to(screen-991)
    margin: 60px 0 80px
    grid-template-columns: 1fr
  @include respond-to(screen-768)
    margin: 50px 0
  @include respond-to(screen-420)
    gap: 24px

  .item
    &:first-child
      grid-column: span 2
      grid-row: 1
      @include respond-to(screen-991)
        grid-column: 1
        grid-row: auto
        text-align: center

      p
        margin: 0 0 12px
      

      h4
        margin-bottom: 24px

    &:last-child
      grid-column: span 1
      grid-row: 1
      @include respond-to(screen-991)
        grid-column: 1
        grid-row: auto 

      .card-grid
        position: sticky
        top: 125px
        display: flex
        flex-direction: column
        gap: 24px
        flex-wrap: wrap
        @include respond-to(screen-991)
          gap: 12px
          flex-direction: row
          position: static
        @include respond-to(screen-420)
          flex-direction: column

        .card
            padding: 20px
            display: flex
            justify-content: space-between
            align-items: center
            border-radius: 10px

            @include respond-to(screen-991)
              flex: 1 1 calc(50% - 6px) 
              width: auto

            $card-colors: #314491,  #e6d152, #bedff2, #dca447, #d47944

            @for $i from 1 through 100  
               &:nth-child(#{length($card-colors)}n + #{$i})
                 background-color: nth($card-colors, ($i - 1) % length($card-colors) + 1)
            
            h5
                color: var(--white)
                font-weight: 400
                margin: 0
                max-width: 32%
                line-height: 1.4
                
                @include respond-to(screen-1784)
                  max-width: 40%

                @include respond-to(screen-1366)
                  max-width: 50%

                @include respond-to(screen-1024)
                  max-width: 55%

                @include respond-to(screen-991)
                  font-size: 16px

.sport-secB
  .hall-fame-container
    margin-top: 65px
    @include respond-to(screen-540)
      margin-top: 35px
    .swiper
      .swiper-wrapper
        .item
          .team-card
            box-shadow: 0px 3px 8px 0px #0000003D
            background-color: var(--white)
            border-radius: 15px
            overflow: hidden
            display: flex
            flex-direction: column
            margin: 5px
            img
              width: 100%
              display: block
              height: 340px
              @include respond-to(screen-1366)
                height: 240px
              @include respond-to(screen-540)
                height: 175px


            div
              padding: 30px 30px 40px 30px
              display: flex
              flex-direction: column
              flex-grow: 1
              @include respond-to(screen-991)
                 padding: 16px 16px 20px 16px
              small
                font-size: 15px
                margin-bottom: 14px
                display: inline-block
                font-weight: 600
                color: var(--prime)

              h4
                margin-bottom: 12px

              p
                margin: 0 0 30px
                flex-grow: 1
                @include respond-to(screen-991)
                  margin: 0 0 20px

              .btn-wraper
                padding: 0

                .theme-btn
                  padding: 10px 16px
                  display: inline-block        
                  align-self: flex-start     
                  text-align: center
                  @include hover

                  &::after
                    background-color: #4459C5
                    border-radius: 25px

                  &::before
                    border-radius: 25px