.content-wrapper {
  box-sizing: border-box;
  max-width: var(--max-width-content-area);
  padding: 0 var(--padding-content-area);
  margin: 0 auto;
}

.content-wrapper.is-grid-3,
.content-wrapper.is-grid-4 {
  display: flex;
  flex-wrap: wrap;
  padding-top: var(--gap-blocks);
  gap: var(--space-column-gap);
  padding-bottom: var(--space-column-gap);
  overflow-x: auto;
  scroll-snap-type: both mandatory;
}

.content-wrapper.is-grid-3 > * {
  max-width: var(--space-column-4);
  width: 100%;
  box-sizing: border-box;
}

.content-wrapper.is-grid-4 > * {
  max-width: var(--space-column-3);
  width: 100%;
  box-sizing: border-box;
}

.content-wrapper.is-grid-3.is-scrolled-adaptation,
.content-wrapper.is-grid-4.is-scrolled-adaptation {
  flex-wrap: nowrap;
}

.content-wrapper.is-grid-4.is-scrolled-adaptation > * {
  max-width: var(--space-column-3);
  min-width: var(--space-column-3);
  scroll-snap-align: center;
}

.content-wrapper.is-grid-3.is-scrolled-adaptation > * {
  max-width: var(--space-column-4);
  min-width: var(--space-column-4);
  scroll-snap-align: center;
}

/* ---------- Adaptation ---------- */
@media screen and (max-width: 1432px) {
  .content-wrapper.is-grid-4.is-scrolled-adaptation {
    max-width: calc(var(--space-column-9) + var(--space-column-plus-gap));
  }

  .content-wrapper.is-grid-4 {
    max-width: calc(var(--space-column-9) + var(--padding-content-area) * 2);
  }

  .content-wrapper.is-grid-3.is-scrolled-adaptation {
    max-width: calc(var(--space-column-8) + var(--space-column-plus-gap));
  }

  .content-wrapper.is-grid-3 {
    max-width: calc(var(--space-column-8) + var(--padding-content-area) * 2);
  }
}

@media screen and (max-width: 1080px) {
  .content-wrapper.is-grid-4 {
    max-width: calc(var(--space-column-6) + var(--padding-content-area) * 2);
  }
}

@media screen and (max-width: 964px) {
  .content-wrapper.is-grid-3 {
    max-width: calc(var(--space-column-4) + var(--padding-content-area) * 2);
  }
}

@media screen and (max-width: 728px) {
  .content-wrapper.is-grid-4 > * {
    max-width: none;
  }
}

@media screen and (max-width: 400px) {
  .content-wrapper.is-grid-4.is-scrolled-adaptation > * {
    min-width: calc(100% - var(--padding-content-area) * 2);
  }
}

@media screen and (max-width: 500px) {
  .content-wrapper.is-grid-3.is-scrolled-adaptation > * {
    min-width: calc(100% - var(--padding-content-area));
  }
}