.gridcards {
  padding: 0 var(--mar);
}

.gridcards--grid {
  display: grid;
  grid-template-columns: repeat(var(--gridcards-cols, 3), 1fr);
  gap: 64px var(--gut);
}

@media (max-width: 1024px) {
  .gridcards--grid {
    grid-template-columns: repeat(var(--gridcards-cols-tablet, 2), 1fr);
    gap: 48px var(--gut);
  }
}

@media (max-width: 660px) {
  .gridcards--grid {
    grid-template-columns: repeat(var(--gridcards-cols-mobile, 1), 1fr);
    gap: 40px var(--gut);
  }
}


.gridcards.-slider .ioss--ss {
  display: flex;
}
.gridcards.-slider .ioss--ssitem {
  width: calc((100% - var(--gut) * var(--gridcards-gap-count, 2)) / var(--gridcards-cols, 3));
}
.gridcards.-slider .ioss--ssitem:not(:last-child) {
  margin-right: var(--gut);
}

.gridcards--nav {
  display: none !important;
}
.gridcards--prev {
  transform: scaleX(-1);
  cursor: pointer;
  .js-start & { opacity: 0.3; pointer-events: none; }
}
.gridcards--next {
  cursor: pointer;
  .js-end & { opacity: 0.3; pointer-events: none; }
}

.gridcards--progress { display: none !important; }

@media (max-width: 1024px) {
  .gridcards.-slider .ioss--ss {
    display: flex;
  }
  .gridcards.-slider .ioss--ssitem {
    width: calc((100% - var(--gut) * var(--gridcards-gap-count-tablet, 1)) / var(--gridcards-cols-tablet, 2));
  }
}

@media (max-width: 660px) {
  .gridcards.-slider .ioss--ss {
    display: flex;
  }
  .gridcards.-slider .ioss--ssitem {
    width: 100%;
  }
}