.rb-carousel-01 {
  display: grid;
  padding: var(--rb-padding-04) 0;
}

.rb-carousel-01.no-script {
  display: block;
}

.rb-carousel-01 .rb-title {
  margin: 0 var(--rb-padding-04) var(--rb-padding-04);
}

.rb-carousel-01 .swiper {
  max-width: 100%;
}

.rb-carousel-01 .swiper-wrapper {
  flex-wrap: wrap;
  gap: var(--rb-padding-04);
  transform: unset;
}

.rb-carousel-01 .swiper-slide {
  width: 100%;
  text-decoration: none;
  color: var(--rb-black-01);
}

.rb-carousel-01 .swiper-slide .rb-content {
  background-color: var(--rb-gray-01);
  padding: var(--rb-padding-04);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--rb-padding-02);
}

.rb-carousel-01 .swiper-slide .rb-content .rb-summary {
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  margin: 0;
}

.rb-carousel-01 .swiper-slide .rb-content .rb-title {
  margin: 0;
}

.rb-carousel-01 .swiper-slide:hover .rb-title {
  color: var(--rb-blue-01);
}

.rb-carousel-01 .swiper-slide:hover .rb-circle-button-01 {
  background-color: var(--rb-white-01);
}

.rb-carousel-01 .swiper-slide:hover .rb-circle-button-01 .rb-arrow-right {
  stroke: var(--rb-blue-01);
}

.rb-carousel-01 .swiper-slide .rb-image {
  width: 100%;
  aspect-ratio: 16/9;
}

.rb-carousel-01 .swiper-initialized .swiper-wrapper {
  flex-wrap: nowrap;
  gap: 0;
}

.rb-carousel-01 .swiper-initialized .swiper-slide {
  opacity: 0.5;
}

.rb-carousel-01 .swiper-initialized .swiper-slide-active {
  opacity: 1;
}

.rb-carousel-01 .swiper-pagination {
  position: unset;
  margin-top: var(--rb-padding-04);
}

.rb-carousel-01 .swiper-pagination-bullet {
  width: 14px;
  height: 14px;
  background: var(--rb-gray-03);
  opacity: 1;
  margin: 0 var(--rb-padding-005) !important;
}

.rb-carousel-01 .swiper-pagination-bullet:hover,
.rb-carousel-01 .swiper-pagination-bullet-active {
  background: var(--rb-gray-01);
}

@media (max-width: 768px) {
  .rb-carousel-01 {
    padding: var(--rb-padding-02) 0;
  }

  .rb-carousel-01 .rb-title {
    margin: 0 var(--rb-padding-02) var(--rb-padding-02);
  }

  .rb-carousel-01 .swiper-slide {
    min-width: 100%;
    max-width: 100%;
  }

  .rb-carousel-01 .swiper-slide .rb-content {
    padding: var(--rb-padding-02);
  }

  .rb-carousel-01 .swiper-pagination {
    position: unset;
    margin-top: var(--rb-padding-02);
  }
}