.slider-container {
  position: relative;
  margin-bottom: 2rem;
}

.slider-wrapper {
  overflow-x: auto;
  display: flex;
  padding: 1rem;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  scrollbar-color: #818181 #f9f9f9;
  user-select: none;
}

.slider-card {
  /* flex: 0 0 calc(100% / 3.25);
     min-width: calc(100% / 3.25); */
  margin-right: 1.5rem;
  scroll-snap-align: start;
  display: inline-block;
  overflow: hidden;
  transition: transform 0.3s ease-in-out;
  transform-origin: center center;
  will-change: transform;
  isolation: isolate;
  padding: 10px;
}

.slider-card:hover {
  transform: translate(0px, -10px);
}

.slider-card:last-child {
  margin-right: 0;
}

.slider-controls {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.slider-button {
  background-color: #000;
  border: none;
  color: white;
  font-size: 1.25rem;
  border-radius: 3rem;
  width: 32px;
  height: 32px;
}

.modal-button {
  background-color: #fff;
  border: none;
  color: black;
  font-size: 1.25rem;
  border-radius: 3rem;
  width: 32px;
  height: 32px;
}

@media (max-width: 767.98px) {
  .slider-card {
    /* flex: 0 0 calc(100% / 1.25);
       min-width: calc(100% / 1.25); */
  }

  .card.slider-card {
    min-height: 480px;
    min-width: 260px;
  }
}

#cardSlider .card.slider-card {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.card.slider-card {
  border-radius: 28px;
  display: flex;
  flex-direction: column;
  min-height: 680px;
  min-width: 372px;
}

.card-body {
  display: flex;
  flex-direction: column;
  justify-content: end;
  flex-grow: 1;
}

.card-inner {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  flex-grow: 1;
  color: #fff;
}

.card-paragraphs {
  display: flex;
  flex-direction: column;
}