@use "../../assets/stylesheets/base/colors" as *;
@use "../../assets/stylesheets/abstracts/mixins" as *;

.swiper {
  width: 100%;
  padding-top: 50px;
  padding-bottom: 50px;
}

.swiper-slide {
  background-position: center;
  background-size: cover;
  width: 80%;
  height: 60%;
  max-width: 860px;

  @include for-mobile {
    max-width: 80%;
  }
}

.swiper-slide img {
  display: block;
  width: 100%;
  object-fit: cover;
}

#projects {
  .swiper-slide {
    p {
      &:last-of-type {
        text-align: center;
        color: $color-text-secondary;
        padding-top: 6px;
      }
    }
    .project-info {
      div {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        padding-top: 33px;
        margin: 0 auto;
        width: 50%;
        white-space: nowrap;

        @include for-mobile {
          width: 100%;
        }

        p {
          margin: 0 29px;
          text-transform: uppercase;
          color: $color-accent-primary;
          padding: 0;

          @include for-mobile {
            margin: 0 12px;
          }
        }
      }
    }
    &:not(.swiper-slide-active) {
      h2 {
        opacity: 0;
      }

      .project-info {
        opacity: 0;
      }
    }
  }
}