/**
 * Card Wrapper
 */

.card-wrapper .tns-ovh{
  padding: 1rem;
}
.card-wrapper__items {
  display: flex;
  gap: 2rem;
}
.card-wrapper:not(.card-wrapper--slider) .card-wrapper__items {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
}

#nos-soins-spa-thermal .card-wrapper:not(.card-wrapper--slider) .card-wrapper__items {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
}

.card-wrapper:not(.card-wrapper--slider) .card-wrapper__items > .layout__region {
  flex: 0 1 100%;
}
@media screen and (min-width: 640px) {
  .card-wrapper:not(.card-wrapper--slider) .card-wrapper__items > .card {
    flex: 0 1 calc(50% - 2rem);
  }
}
@media all and (min-width: 850px) {
  .card-wrapper {
    padding: 0 1rem;
  }
}
@media screen and (min-width: 900px) {
  .card-wrapper:not(.card-wrapper--slider) .card-wrapper__items > .card {
    flex: 0 1 calc(33.333% - 1.333rem);
  }
  .card-wrapper--tiny:not(.card-wrapper--slider) .card-wrapper__items > .card {
    flex: 0 1 calc(25% - 1rem);
  }
}
@media all and (min-width: 1100px) {
  .card-wrapper {
    max-width: 1400px;
    margin: 0 auto;
  }
}
@media all and (min-width: 1200px) {
  .card-wrapper {
    padding: 0;
  }
  .card-wrapper__items {
    flex-wrap: wrap;
    justify-content: center;
  }
  /* .card-wrapper:not(.card-wrapper--slider) .card-wrapper__items {
    flex-wrap: wrap;
} */

#nos-soins-spa-thermal .card-wrapper:not(.card-wrapper--slider) .card-wrapper__items {
  flex-wrap: nowrap;
}
}

/**
 * Card
 **/


.card {
  border-radius: 3px;
  background-color: var(--brand-white);
  display: flex !important;
  flex-direction: column;
  box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.06);
}
.card-wrapper--no-shadow .card {
  box-shadow: none;
}
.card-wrapper:not(.card-wrapper--slider) .card-wrapper__items > .card {
  max-width: 327px;
}
.card-wrapper--tiny:not(.card-wrapper--slider) .card-wrapper__items > .card {
  max-width: 252px;
}
.card__text {
  padding: 1rem;
}
.card__text .field__item > * {
  margin: 0.5rem 0;
}
.card__text .field__item > *:first-child {
  margin-top: 0;
}
.card__text ul {
  padding-left: 1.5rem;
}
.card--primary {
  background-color: var(--brand-primary-light-color);
}
.card--secondary {
  background-color: var(--brand-secondary-light-color);
}
.card__link,
.card__file {
  margin-top: auto;
  text-align: center;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1rem 2rem 1rem 1rem;
}
.card__link:before,
.card__file::before {
  transform: none;
  position: static;
}
.card__link:hover:before,
.card__file:hover::before {
  transform: translateX(4px);
}
.card--cta-alt .card__text {
  padding: 2rem 2rem 1rem;
}
.card--cta-alt .card__link,
.card--cta-alt .card__file{
  align-self: flex-start;
  padding: 1rem 1rem;
  margin: 0 2rem 1rem;
  font-size: 1rem;
}
.card  button.cta {
  border: none;
}
.card__link.reservation-modal__open-btn {
  position: static;
  max-width: unset;
  margin-top: auto;
  text-align: center;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1rem 2rem 1rem 1rem;
  font-size: 1.278rem;
  font-weight: 400;
}
.card__link.reservation-modal__open-btn::after {
  content: none;
}
.reserver #block-popupreservationspa + .reservation-modal__open-btn,
.booking #block-popupreservationspa + .reservation-modal__open-btn,
.reservar #block-popupreservationspa + .reservation-modal__open-btn {
  display: none;
}
@media all and (min-width: 850px) {
  .card-wrapper:not(.card-wrapper--slider) .card-wrapper__items > .card {
    max-width: 327px;
  }
}
@media all and (min-width: 1100px) {
  .card-wrapper:not(.card-wrapper--slider) .card-wrapper__items > .card {
    max-width: 356px;
  }
  .card__text {
    padding: 2rem;
  }
}
@media all and (min-width: 1200px) {
  .card-wrapper .card {
    max-width: 356px;
  }
}

.card--tiny .card__text {
  padding: 1rem;
}
.card--tiny .card__text p {
  font-size: var(--paragraph-size-small);
}
@media all and (min-width: 850px) {
  .card-wrapper--tiny:not(.card-wrapper--slider) .card-wrapper__items > .card {
    max-width: 252px;
  }
}
@media all and (min-width: 1200px) {
  .card-wrapper--tiny .card {
    max-width: 252px;
  }
}