/* // GALLERY CAROUSAL */
/* <!-- GALLERY CONTAINER START -->
    <section class="gallery">
        <!-- HEADING -->
        <h1></h1>
        <!-- GALLERY ITEM CONTAINER -->
        <div class="gallery-item" onclick="toggleActive(event)">
            <!-- SPAN IMAGES -->
            <span class="active">
                <img src="" alt="">
                <p></p>
            </span>
            <!-- ADD MORE IMAGES USING TAG SPAN... -->
            <span>
                <img src="" alt="">
                <p></p>
            </span>
        </div>
    </section>
    <!-- GALLERY CONTAINER END --> */

/* GALLERY CONTAINER START*/
.gallery {
  padding: 20px 0;

  & h1 {
    margin-bottom: 20px;
    text-align: center;
    color: red;
  }

  & .gallery-item {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    width: 100%;
    margin: 0 auto;

    & span {
      position: relative;
      width: 5vw; // DEFAULT IMAGE WIDTH
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50px;
      overflow: hidden;
      transition: all 0.5s ease-in-out;

      & img {
        width: 100%;
        height: 500px; // HEIGHT MUST BE FIXED
        border-radius: 50px;
        object-fit: cover;
        transition: all 0.6s ease;
      }

      & p {
        position: absolute;
        display: none;
        font-size: large;
        padding: 1rem;
        color: white;
        text-shadow: 2px 2px 4px #000000;
      }

      &.active {
        width: 45%;
        border-radius: 10px;

        & img {
          width: 100%;
          border-radius: 10px;
          object-fit: cover;
          aspect-ratio: 16/9;
        }

        & p {
          display: block;
          bottom: 0;
        }
      }
    }
  }
}

/* // 768px SCREEN */
@media screen and (max-width: 768px) {
  /* GALLERY CONTAINER */
  .gallery-item {
    position: relative;
    overflow: hidden;
    cursor: pointer;

    &.active {
      cursor: grab;
      cursor: -webkit-grab;
      transition: transform 0.3s ease-in-out;
    }

    &.active.grabbing {
      cursor: grabbing;
      cursor: -webkit-grabbing;
    }

    & span {
      display: none;

      &.active {
        display: block;
        width: 100%;
        height: auto;
      }
    }

    & span img {
      opacity: 0;
      transition: opacity 0.5s ease-in-out;
    }

    & span.active img {
      width: 100%;
      height: auto;
      opacity: 1;
    }

    &.active {
      transition: transform 0.3s ease-in-out;
    }
  }
}

/* GALLERY CONTAINER ENDED*/