@use "variables";
@use "placeholders";

.carousel {
  position: relative;
  height: 30svh;
  width: 100%;
  z-index: 1;
  box-sizing: content-box;
  margin-bottom: 2rem;

  @media screen and (min-width: variables.$breakpoint) {
    height: 60svh;
  }

  &__btn {
    position: absolute;
    background: none;
    border: none;
    outline: none;
    font-size: calc(2rem + 1.5vw);
    z-index: 2;
    cursor: pointer;
    color: rgb(240, 240, 240);
    padding: 8px 12px;
    transform: translateY(-50%);
    top: 50%;
  }

  #prev {
    left: 1rem;
  }

  #next {
    right: 1rem;
  }

  &__slide {
    position: absolute;
    left: 0;
    right: 0;
    margin-inline: auto;
    width: fit-content;
    height: 100%;
    opacity: 0;

    &.carousel-active {
      opacity: 1;
      transition: opacity 0.5s ease-in-out;
    }

    & img {
      display: block;
      height: 100%;
      object-fit: cover;
      aspect-ratio: 11 / 7;
      object-position: top center;
      border-radius: 0.5rem;
      box-shadow: 6.2px 12.5px 12.5px #2e13054f;

      @media screen and (min-width: 600px)
      {
        aspect-ratio: 16 / 7;
      }
    }
  }

  &__gallery {
    display: flex;
    flex-wrap: wrap;
    width: 90%;
    gap: 1.5rem;
    justify-content: center;

    & li {
        list-style: none;
    }

    // @media screen and (min-width: variables.$breakpoint) {
    //   display: grid;
    //   grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    //   margin: 0 auto 1rem auto;
    // }

    &__card {
        @extend %card;
        max-width: 15rem;
        width: fit-content;

        & img {
          width: 100%;
        //   height: auto;
          border-radius: .2rem;
          object-fit: cover;
          object-position: top;
        }

        & .position-button {
            top: 1rem;
        }
    }

    // &__text {
    //     padding: .5rem;
    // }

    & .delete__button {
        margin: 1rem;
        display: block;
    }
  }
}