/*
@include max($tablet) {
	height: 60px;
}
*/
/*
Beispiel:
@include default_text_specs(
    $css-variable-prepend: "kc-teaser-title",
    $font-weight: 700,
    $line-height: 1,
    $text-align: "center"
);
*/
/*
Beispiel:
@include default_h1_specs(
    $css-variable-prepend: "",
    $font-weight: 700,
    $line-height: 1,
    $text-align: "center"
);
*/
/*
Beispiel:
@include default_h2_specs(
    $css-variable-prepend: "",
    $font-weight: 700,
    $line-height: 1,
    $text-align: "center"
);
*/
/*
Beispiel:
@include css_variable_prepend(
    $property: "font-size",
    $prepend-string: 'kc-teaser-title',
    $default-value: 20px
);
*/
/*
@extend %transition;
*/
/*
@extend %transition-timing;
*/
/*
@include max($tablet) {
	height: 60px;
}
*/
body .grid-container.trio-grid-container .grid,
html .grid-container.trio-grid-container .grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
}
body .grid-container.bento-container .grid,
html .grid-container.bento-container .grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: 280px;
  gap: var(--space-md);
}
body .grid-container.bento-container .teaser-container.bento-1-container,
html .grid-container.bento-container .teaser-container.bento-1-container {
  grid-column: span 4;
  grid-row: span 2;
}
body .grid-container.bento-container .teaser-container.bento-2-container,
html .grid-container.bento-container .teaser-container.bento-2-container {
  grid-column: span 2;
}
body .grid-container.bento-container .teaser-container.bento-3-container,
html .grid-container.bento-container .teaser-container.bento-3-container {
  grid-column: span 2;
}
body .grid-container.bento-container .teaser-container.bento-4-container,
html .grid-container.bento-container .teaser-container.bento-4-container {
  grid-column: span 3;
}
body .grid-container.bento-container .teaser-container.bento-5-container,
html .grid-container.bento-container .teaser-container.bento-5-container {
  grid-column: span 3;
}
body .grid-container.bento-container .teaser-container.bento-6-container,
html .grid-container.bento-container .teaser-container.bento-6-container {
  grid-column: span 6;
}
body .grid-container.values-grid-container .grid,
html .grid-container.values-grid-container .grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
body .grid-container.workshop-grid-container .grid,
html .grid-container.workshop-grid-container .grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
}
body .grid-container.news-grid-container .grid,
html .grid-container.news-grid-container .grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-md);
}
@media (max-width: 960px) {
  body .grid-container.trio-grid-container .grid,
  body .grid-container.workshop-grid-container .grid,
  html .grid-container.trio-grid-container .grid,
  html .grid-container.workshop-grid-container .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body .grid-container.values-grid-container .grid,
  body .grid-container.news-grid-container .grid,
  html .grid-container.values-grid-container .grid,
  html .grid-container.news-grid-container .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 480px) {
  body .grid-container.trio-grid-container .grid,
  body .grid-container.values-grid-container .grid,
  body .grid-container.workshop-grid-container .grid,
  body .grid-container.news-grid-container .grid,
  html .grid-container.trio-grid-container .grid,
  html .grid-container.values-grid-container .grid,
  html .grid-container.workshop-grid-container .grid,
  html .grid-container.news-grid-container .grid {
    grid-template-columns: minmax(0, 1fr);
  }
  body .grid-container.bento-container .grid,
  html .grid-container.bento-container .grid {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: 360px;
  }
}