@import '../_common';
@import '../../sass/photo-gallery/photo-gallery'

.banner
  &::before
  //  background: linear-gradient(180deg, #8497FB 0%, #495BB7 100%)
   overflow: hidden
  &.home-banner
    .bg
      position: relative
      @include respond-to(screen-540)
          height: 30vh !important
      .banner-wrapper
        bottom: 15% !important

        h2
          display: none
p
  text-align: justify 
.swiper
    width: 475px
    height: 475px
    @include respond-to(screen-1366)
      width: 390px
      height: 390px
    @include respond-to(screen-768)
      width: 350px
      height: 350px
    @include respond-to(screen-540)
      width: 235px
      height: 235px
    .swiper-slide
      .item
        position: relative
        .play-btn
            z-index: 999
            position: absolute
            left: 50%
            top: 50%
            transform: translate(-50% , -50%)
            background-color: var(--white)
            --btnsize: 60px
            @include respond-to(screen-540)
              --btnsize: 40px
.photo-secB
  padding: 20px 0 45px

  .btn-groups
    display: flex
    gap: 45px
    justify-content: center
    margin: 60px 0 90px
    @include respond-to(screen-991)
        margin: 35px 0 50px
    @include respond-to(screen-540)
       gap: 15px
    @include respond-to(screen-420)
       gap: 6px
    
    .btn-outline
      &:first-child
        transform: rotate(-12deg)
        @include respond-to(screen-540)
          transform: rotate(0)

      &:last-child
        transform: rotate(-12deg)
        @include respond-to(screen-540)
          transform: rotate(0)


    .theme-btn
      transform: rotate(9deg)
      @include respond-to(screen-540)
          transform: rotate(0)

.photo-grid
  display: grid
  grid-template-columns: repeat(3, 1fr)
  gap: 45px

.card
    div
     position: relative 
     img
        width: 100%
        display: block
        border-radius: 10px

    .play-btn
        position: absolute
        right: 24px
        bottom: 24px
        width: 40px
        height: 40px
        background-color: var(--white)
    .line-grid
      .dot-group
        display: flex
        gap: 8px
        align-items: center
        @include respond-to(screen-420)
          gap: 4px

        .dot
            width: 16px
            height: 16px
            border-radius: 50%
            background-color: #ccc 
            flex-shrink: 0
            @include respond-to(screen-420)
              width: 10px
              height: 10px

        .dot-1
            background: rgba(68, 89, 197, 1)

        .dot-2
            background: rgba(68, 89, 197, 0.5)

        .dot-3
           background: rgba(68, 89, 197, 0.2)