.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.-slider {
  --ioss-arrow-inset: var(--mar);
}

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

.gridcards.-slider .ioss--arrow svg {
  width: 36px;
}

@media (max-width: 1024px) {
  .gridcards.-slider .ioss--ss {
    display: flex;
  }
  .gridcards.-slider .ioss--arrow svg {
    width: 34px;
  }
  .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: calc((85% - var(--gut) * var(--gridcards-gap-count-mobile, 0)) / var(--gridcards-cols-mobile, 1));
  }

  .gridcards.-slider .ioss--arrow {
    width: calc(var(--col) * 3 + var(--gut) * 2);
  }
  .gridcards.-slider .ioss--arrow svg {
    flex: none;
    width: 30px;
    height: auto;
  }
  .gridcards.-slider .ioss--prev { padding-left: var(--mar); }
  .gridcards.-slider .ioss--next { padding-right: var(--mar); }
}