/**
 * @file
 * Cards container.
 */

:root {
  --cards-container-gap: 2rem;
}

.cards-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--cards-container-gap);
  width: 100%;
}

.cards-container + .cards-container {
  margin-top: var(--cards-container-gap);
}

.cards-container .card {
  flex-basis: 100%;
  max-width: 100%;
}

.sc-cards-link-field {
  display: flex;
  justify-content: center;
  margin-top: calc(var(--cards-container-gap) * 2);
}

@media screen and (min-width: 576px) {
  .cards-container:not(.cards-container--card-horizontal) .card {
    flex-basis: calc((100% - calc(var(--cards-container-gap) * 1)) / 2);
    max-width: calc((100% - calc(var(--cards-container-gap) * 1)) / 2);
  }
}

@media screen and (min-width: 767px) {
  .cards-container:not(.cards-container--card-horizontal) .card {
    flex-basis: calc((100% - calc(var(--cards-container-gap) * 2)) / 3);
    max-width: calc((100% - calc(var(--cards-container-gap) * 2)) / 3);
  }
}

@media screen and (min-width: 960px) {
  .cards-container.cards-container--card-m .card,
  .cards-container.cards-container--card-s .card {
    flex-basis: calc((100% - calc(var(--cards-container-gap) * 3)) / 4);
    max-width: calc((100% - calc(var(--cards-container-gap) * 3)) / 4);
  }
}

@media screen and (min-width: 1100px) {
  .cards-container.cards-container--card-s .card {
    flex-basis: calc((100% - calc(var(--cards-container-gap) * 4)) / 5);
    max-width: calc((100% - calc(var(--cards-container-gap) * 4)) / 5);
  }
}