@import '../_common'
@import '../../sass/photo-gallery/photo-gallery'
p
  text-align: justify 
.banner
  z-index: 2
  .bg
    .banner-wrapper
      bottom: 15% !important

      .content
        width: 100%
        margin: 0 auto !important  
.banner
  &::before
    background: linear-gradient(360deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.85) 100%), linear-gradient(179deg, rgba(0, 0, 0, 0) 27.5%, rgba(0, 0, 0, 0.85) 100%)
    overflow: hidden
  
.photo-secB
  padding: 20px 0 90px

  .btn-groups
    display: flex
    gap: 45px
    justify-content: center
    margin: 60px 0 90px
    @include respond-to(screen-991)
       margin: 30px 0 60px
       gap: 30px
    @include respond-to(screen-540)
       gap: 20px
    @include respond-to(screen-420)
       gap: 6px
       margin: 20px 0 35px
    
      
    .btn-outline
      padding: 10px 16px
      color: var(--black)
      transform: rotate(9deg)
      line-height: 2
      @include respond-to(screen-540)
        transform: rotate(0)
        padding: 6px 10px
        font-size: 12px
      &:last-child
        transform: rotate(-12deg)
        @include respond-to(screen-540)
          transform: rotate(0)

      &:hover
        color: var(--white)

      @include hover

      &::after
        border: 1px solid var(--black)
        border-radius: 25px

      &::before
        background-color: var(--black)
        border-radius: 25px


    .theme-btn
          padding: 10px 16px
          transform: rotate(-12deg)
          line-height: 2
          @include hover
          @include respond-to(screen-540)
            transform: rotate(0)
            padding: 6px 10px
            font-size: 12px

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

  .photo-grid
    display: grid
    grid-template-columns: repeat(3, 1fr)
    gap: 25px
    padding: 0 15px
    width: 80%
    margin: 0 auto
    @include respond-to(screen-1536)
      width: 90%
    @include respond-to(screen-1024)
      width: 100%
    @include respond-to(screen-991)
      grid-template-columns: repeat(2 , 1fr)
    @include respond-to(screen-675)
      grid-template-columns: 1fr
      gap: 20px
    @include respond-to(screen-420)
      padding: 0 15px
      width: 100%

    .card
        border: none
        padding: 30px
        position: relative
        @include respond-to(screen-1024)
          padding: 15px

        &::before
            position: absolute
            bottom: 45px
            left: 10px
            content: ""
            background-image: url('../../images/creative-corner/frame-girl.png')
            background-repeat: no-repeat
            width: 100px
            height: 100px
            background-size: contain 
            z-index: 1 
            animation: rotateImage 1.5s linear infinite alternate 

            @keyframes rotateImage
                from
                  transform: rotate(0deg)
                to
                  transform: rotate(22deg)


        &:nth-child(3n + 1)
          background-image: url('../../images/creative-corner/frame1.jpg')
          background-repeat: no-repeat
          width: 100%
          background-size: cover

        &:nth-child(3n + 2)
          background-image: url('../../images/creative-corner/frame2.jpg')
          background-repeat: no-repeat
          width: 100%
          background-size: cover

        &:nth-child(3n)
          background-image: url('../../images/creative-corner/frame3.jpg')
          background-repeat: no-repeat
          width: 100%
          background-size: cover

        img
          display: block
          border: 3px solid var(--white)
          transform: rotate(-2deg)

        h5
          padding: 20px 0 0
          text-align: center
          transform: rotate(-2deg)
          font-size: 1.2rem
          line-height: 1.2
          width: 70%
          margin: 0 auto
          @include respond-to(screen-1280)
            width: 100%
          @include respond-to(screen-1024)
            width: 75%
            font-size: 1rem
          @include respond-to(screen-991)
            width: 55%