.c-card-grid__inner {
  width: 100%;
  max-width: 1184px;
  margin-inline: auto;
  padding-inline: 16px;
}
@media (min-width: 768px) {
  .c-card-grid__inner {
    padding-inline: 40px;
  }
}
@media (min-width: 1224px) {
  .c-card-grid__inner {
    padding-inline: 0;
  }
}

.c-card-grid__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
@media (min-width: 768px) {
  .c-card-grid__grid {
    gap: 32px;
  }
}

.c-card-grid--cols-1 .c-card-grid__grid {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .c-card-grid--cols-2 .c-card-grid__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .c-card-grid--cols-3 .c-card-grid__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 768px) {
  .c-card-grid--cols-4 .c-card-grid__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }
}

.c-card-grid--featured .c-card-grid__grid {
  gap: 24px;
}
@media (min-width: 768px) {
  .c-card-grid--featured .c-card-grid__grid {
    gap: 32px;
  }
}

.c-card-grid--teaser .c-card-grid__grid {
  gap: 24px;
}
@media (min-width: 768px) {
  .c-card-grid--teaser .c-card-grid__grid {
    gap: 24px;
  }
}

.c-card-grid--list-text .c-card-grid__grid {
  grid-template-columns: 1fr;
  gap: 16px;
}

.c-card-grid--left .c-card-grid__grid {
  grid-template-columns: 1fr;
  gap: 32px;
}

.c-card-grid--right .c-card-grid__grid {
  grid-template-columns: 1fr;
  gap: 32px;
}

.c-card-grid--dark .c-card-grid__grid {
  gap: 24px;
}