.carousel-gallery {
  max-width: 335px;
  overflow: hidden;
  margin: 0 auto;
  padding: 0 20px;
  border-radius: 12px;

  .swiper-container {
    border-radius: 12px;
  }

  .swiper-slide {
    a {
      color: inherit;
      text-decoration: none;
      display: block;
      width: 100%;
      height: 400px;
      border-radius: 8px;
      overflow: hidden;
      position: relative;
      -webkit-box-shadow: 3px 2px 20px 0px rgba(0, 0, 0, 0.2);
      -moz-box-shadow: 3px 2px 20px 0px rgba(0, 0, 0, 0.2);
      box-shadow: 3px 2px 20px 0px rgba(0, 0, 0, 0.2);

      &:hover {
        .overlay {
          opacity: 1 !important;
          .project-badge,
          .kochabend-more-btn,
          .project-title,
          .project-subtitle {
            opacity: 1 !important;
          }
        }
      }

      .image {
        width: 100%;
        height: 100%;
        position: relative;
        background-size: cover;
        background-position: center center;
      }

      .video-slide {
        width: 100%;
        height: 100%;
        position: relative;
        -webkit-box-shadow: 3px 2px 20px 0px rgba(0, 0, 0, 0.2);
        -moz-box-shadow: 3px 2px 20px 0px rgba(0, 0, 0, 0.2);
        box-shadow: 3px 2px 20px 0px rgba(0, 0, 0, 0.2);

        .video-bg {
          width: 100%;
          height: 100%;
          object-fit: cover;
          display: block;
        }
      }

      .overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(20, 20, 20, 0.8);
        text-align: center;
        opacity: 0;
        z-index: 5;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: left;
        padding: 20px;
        -webkit-transition: all 0.2s linear;
        -o-transition: all 0.2s linear;
        transition: all 0.2s linear;

        .project-badge {
          /* text-align: right; */
          position: absolute;
          top: 20px;
          left: 20px;
          color: #fff !important;
          font-size: 0.85rem;
          font-weight: 700;
          opacity: 0;
          z-index: 10;
          transition: all 200ms ease-in;
        }

        .project-title {
          color: #fff !important;
          display: block;
          font-size: 1.5rem;
          font-weight: 600;
          opacity: 0;
          padding: 10px 0;
          z-index: 10;
          transition: all 200ms ease-in;
        }

        .project-subtitle {
          color: #fff;
          display: block;
          font-size: 1rem;
          font-weight: 300;
          opacity: 0;
          padding: 10px 0;
          z-index: 10;
          transition: all 200ms ease-in;
        }

        .kochabend-more-btn {
          cursor: pointer;
          position: absolute;
          bottom: 20px;
          left: 20px;
          border: none;
          background-color: rgba(0, 87, 183, 0.9);
          color: #fff !important;
          padding: 8px 10px;
          border-radius: 4px;
          font-size: 0.85rem;
          font-weight: 700;
          opacity: 0;
          z-index: 10;
          transition: all 200ms ease-in;
        }
      }
    }
  }

  .swiper-pagination {
    position: relative;
    bottom: auto;
    text-align: center;
    margin-top: 25px;

    .swiper-pagination-bullet {
      transition: all 0.2s linear;
      &:hover {
        opacity: 0.7;
      }
      &.swiper-pagination-bullet-active {
        background-color: #0057b7;
        transform: scale(1.2, 1.2);
      }
    }
  }
}

@media (min-width: 768px) {
  .carousel-gallery {
    max-width: 728px;
    .swiper-slide a {
      width: 300px;
      height: 400px;
    }
  }
}

@media (min-width: 1024px) {
  .carousel-gallery {
    .swiper-slide a {
      width: 220px;
      /* height: 300px; */
    }
  }
}