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

.gridcustom--grid {
  display: flex;
  flex-wrap: wrap;
  gap: 64px var(--gut);
}

.gridcustom--item.-size-2 {width: calc(var(--col) * 2 + var(--gut) * 1);}
.gridcustom--item,
.gridcustom--item.-size-3 {width: calc(var(--col) * 3 + var(--gut) * 2);}
.gridcustom--item.-size-4 {width: calc(var(--col) * 4 + var(--gut) * 3);}
.gridcustom--item.-size-5 {width: calc(var(--col) * 5 + var(--gut) * 4);}
.gridcustom--item.-size-6 {width: calc(var(--col) * 6 + var(--gut) * 5);}

@media (max-width: 1024px) {
  .gridcustom--grid {
    gap: 48px var(--gut);
  }

  .gridcustom--item.-size-2 {width: calc(var(--col) * 2 + var(--gut) * 1);}
  .gridcustom--item,
  .gridcustom--item.-size-3 {width: calc(var(--col) * 3 + var(--gut) * 2);}
  .gridcustom--item.-size-4 {width: calc(var(--col) * 4 + var(--gut) * 3);}
  .gridcustom--item.-size-5 {width: calc(var(--col) * 5 + var(--gut) * 4);}
  .gridcustom--item.-size-6 {width: calc(var(--col) * 6 + var(--gut) * 5);}
}

@media (max-width: 660px) {
  .gridcustom--grid {
    gap: 40px var(--gut);
  }
  .gridcustom--item.-size-2 {width: 100%;}
  .gridcustom--item,
  .gridcustom--item.-size-3 {width: 100%;}
  .gridcustom--item.-size-4 {width: 100%;}
  .gridcustom--item.-size-5 {width: 100%;}
  .gridcustom--item.-size-6 {width: 100%;}
}


.gridcustom.-slider .ioss--ss {
  display: flex;
}
.gridcustom.-slider .gridcustom--item {
  flex-shrink: 0;
  margin-right: var(--gut);
}

.gridcustom.-slider .gridcustom--item.-size-2 {width: calc(var(--col) * 2 + var(--gut) * 1);}
.gridcustom.-slider .gridcustom--item,
.gridcustom.-slider .gridcustom--item.-size-3 {width: calc(var(--col) * 3 + var(--gut) * 2);}
.gridcustom.-slider .gridcustom--item.-size-4 {width: calc(var(--col) * 4 + var(--gut) * 3);}
.gridcustom.-slider .gridcustom--item.-size-5 {width: calc(var(--col) * 5 + var(--gut) * 4);}
.gridcustom.-slider .gridcustom--item.-size-6 {width: calc(var(--col) * 6 + var(--gut) * 5);}


.gridcustom.-slider .gridcustom--item:last-child {
  margin-right: 0;
}

@media (max-width: 1024px) {
  .gridcustom.-slider .ioss--ss {
    display: flex;
  }

  .gridcustom.-slider .gridcustom--item.-size-2 {width: calc(var(--col) * 3 + var(--gut) * 2);}
  .gridcustom.-slider .gridcustom--item,
  .gridcustom.-slider .gridcustom--item.-size-3 {width: calc(var(--col) * 4 + var(--gut) * 3);}
  .gridcustom.-slider .gridcustom--item.-size-4 {width: calc(var(--col) * 6 + var(--gut) * 5);}
  .gridcustom.-slider .gridcustom--item.-size-5 {width: calc(var(--col) * 6 + var(--gut) * 5);}
  .gridcustom.-slider .gridcustom--item.-size-6 {width: calc(var(--col) * 6 + var(--gut) * 5);}
}

@media (max-width: 660px) {
  .gridcustom.-slider .ioss--ss {
    display: flex;
  }

  .gridcustom.-slider .gridcustom--item.-size-2 {width: calc(var(--col) * 6 + var(--gut) * 5);}
  .gridcustom.-slider .gridcustom--item,
  .gridcustom.-slider .gridcustom--item.-size-3 {width: calc(var(--col) * 8 + var(--gut) * 7);}
  .gridcustom.-slider .gridcustom--item.-size-4 {width: calc(var(--col) * 11 + var(--gut) * 10);}
  .gridcustom.-slider .gridcustom--item.-size-5 {width: calc(var(--col) * 11 + var(--gut) * 10);}
  .gridcustom.-slider .gridcustom--item.-size-6 {width: calc(var(--col) * 11 + var(--gut) * 10);}
}