.jarvdc-cluster.jarvdc-layout-template-3 {
  --jarvdc-grid-template-columns-pc: 3;
  --jarvdc-grid-template-columns-tablet: 2;
  --jarvdc-grid-template-columns-mobile: 1;
  --jarvdc-grid-column-gap-pc: 20px;
  --jarvdc-grid-column-gap-tablet: 20px;
  --jarvdc-grid-column-gap-mobile: 20px;
  --jarvdc-grid-row-gap-pc: 20px;
  --jarvdc-grid-row-gap-tablet: 20px;
  --jarvdc-grid-row-gap-mobile: 20px;

  display: block;

  /* Default (PC) */
  --jarvdc-grid-template-columns: var(--jarvdc-grid-template-columns-pc);
  --jarvdc-grid-column-gap: var(--jarvdc-grid-column-gap-pc);
  --jarvdc-grid-row-gap: var(--jarvdc-grid-row-gap-pc);
}

/* DISPOSITION GRID */
.jarvdc-cluster.jarvdc-layout-template-3 .jarvdc-columns-cluster {
  display: grid;
  grid-template-columns: repeat(var(--jarvdc-grid-template-columns), 1fr);
  grid-column-gap: var(--jarvdc-grid-column-gap);
  grid-row-gap: var(--jarvdc-grid-row-gap);
}

/* DISPOSITION SLIDER */
.jarvdc-cluster.jarvdc-layout-template-3 .jarvdc-slider-cluster {
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

.jarvdc-cluster.jarvdc-layout-template-3 .jarvdc-slider-cluster .jarvdc-cluster-col {
  flex: 0 0 calc(100% / var(--jarvdc-grid-template-columns));
  box-sizing: border-box;
  padding-right: var(--jarvdc-grid-column-gap);
}

.jarvdc-cluster.jarvdc-layout-template-3 .jarvdc-slider-cluster .jarvdc-cluster-col:last-child {
  padding-right: 0;
}

/* ========================================================
   DEVICE CLASSES SUPPORT (EDITOR / PREVIEW)
   ======================================================== */

/* TABLET (editor preview) */
.jarvdc-cluster.jarvdc-layout-template-3.jarvdc-device-tablet {
  --jarvdc-grid-template-columns: var(--jarvdc-grid-template-columns-tablet);
  --jarvdc-grid-column-gap: var(--jarvdc-grid-column-gap-tablet);
  --jarvdc-grid-row-gap: var(--jarvdc-grid-row-gap-tablet);
}

.jarvdc-cluster.jarvdc-layout-template-3.jarvdc-device-tablet
.jarvdc-slider-cluster .jarvdc-cluster-item {

  flex: 0 0 calc(
    (100% - (var(--jarvdc-grid-template-columns-tablet) - 1) *
    var(--jarvdc-grid-column-gap-tablet))
    / var(--jarvdc-grid-template-columns-tablet)
  );
}

/* MOBILE (editor preview) */
.jarvdc-cluster.jarvdc-layout-template-3.jarvdc-device-mobile {
  --jarvdc-grid-template-columns: var(--jarvdc-grid-template-columns-mobile);
  --jarvdc-grid-column-gap: var(--jarvdc-grid-column-gap-mobile);
  --jarvdc-grid-row-gap: var(--jarvdc-grid-row-gap-mobile);
}

.jarvdc-cluster.jarvdc-layout-template-3.jarvdc-device-mobile
.jarvdc-slider-cluster .jarvdc-cluster-item {

  flex: 0 0 calc(
    (100% - (var(--jarvdc-grid-template-columns-mobile) - 1) *
    var(--jarvdc-grid-column-gap-mobile))
    / var(--jarvdc-grid-template-columns-mobile)
  );
}

/* ========================================================
   FRONTEND RESPONSIVE
   ======================================================== */

/* TABLET */
@media (max-width: 1024px) {
  .jarvdc-cluster.jarvdc-layout-template-3 {
    --jarvdc-grid-template-columns: var(--jarvdc-grid-template-columns-tablet);
    --jarvdc-grid-column-gap: var(--jarvdc-grid-column-gap-tablet);
    --jarvdc-grid-row-gap: var(--jarvdc-grid-row-gap-tablet);
  }

  .jarvdc-cluster.jarvdc-layout-template-3 .jarvdc-slider-cluster .jarvdc-cluster-item {
    flex: 0 0 calc((100% - (var(--jarvdc-grid-template-columns-tablet) - 1) * var(--jarvdc-grid-column-gap-tablet)) / var(--jarvdc-grid-template-columns-tablet));
  }
}

/* MOBILE */
@media (max-width: 767px) {
  .jarvdc-cluster.jarvdc-layout-template-3 {
    --jarvdc-grid-template-columns: var(--jarvdc-grid-template-columns-mobile);
    --jarvdc-grid-column-gap: var(--jarvdc-grid-column-gap-mobile);
    --jarvdc-grid-row-gap: var(--jarvdc-grid-row-gap-mobile);
  }

  .jarvdc-cluster.jarvdc-layout-template-3 .jarvdc-slider-cluster .jarvdc-cluster-item {
    flex: 0 0 calc((100% - (var(--jarvdc-grid-template-columns-mobile) - 1) * var(--jarvdc-grid-column-gap-mobile)) / var(--jarvdc-grid-template-columns-mobile));
  }
}