.cards {
  margin-left: auto;
  margin-right: auto;
  margin-top: var(--spacing-big);
}

.cards .title-container {
  margin-bottom: var(--s0);
}

.cards .heading {
  display: inline-block;
  margin-bottom: var(--s3);
}

.cards .title-container .note {
  text-align: left;
  background-image: url("data:image/svg+xml,%3Csvg width='8' height='8' viewBox='0 0 8 8' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='8' height='8' fill='%23FAE05A'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left center;
  padding-left: 2ch;
}

.cards .main {
  display: flex;
  flex-direction: column;
}

.cards .controls {
  display: none;
  gap: var(--s2);
  margin-bottom: var(--s2);
  margin-left: auto;
}

.cards .controls svg {
  fill: var(--black-medium);
}

.cards .controls .start svg,
.cards .controls .end svg {
  fill: var(--grey);
  pointer-events: none;
}

.cards .controls .start:hover,
.cards .controls .end:hover {
  cursor: initial;
}

.cards .swiper-container {
  width: 100%;
}

.cards .swiper-container:hover {
  cursor: grab;
}

.cards .card a {
  display: block;
}

.cards .card img {
  transition: transform var(--medium) ease-in-out;
}

.cards .card img:hover {
  cursor: grab;
}

.cards .card .info {
  margin-top: var(--s-4);
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
}

.cards .card .info.vertical {
  flex-direction: column;
}

.cards .card .price {
  white-space: nowrap;
}

.cards .card .price .currency {
  font-size: var(--s0);
  position: relative;
  bottom: 0.13em;
}

.card span sup {
  font-size: 0.8em;
  line-height: 2ex;
  position: absolute;
  top: 0.25em;
  left: -1.3ch;
}

@media (min-width: 980px) {
  .cards {
    display: flex;
  }

  .cards > .title-container {
    width: 25%;
  }

  .cards .title .note {
    background-position: left 0 top 0.3em;
  }

  .cards .heading {
    max-width: 8ch;
    margin-top: var(--s4);
  }

  .cards .main {
    width: 75%;
    margin-left: 0;
  }

  .cards .controls {
    display: flex;
  }
}

@media (min-width: 1600px) {
  .cards {
    width: 90%;
  }
}