/*
 * Only color properties are set here. Card and Columns sizing and layout
 * come from the editor's default behavior.
 */

:root:has(#scrut-release-cards) [data-component="Columns"] > a:nth-child(4n + 1) [data-component="Card"] {
  --card-bg: var(--scr-card-blue-bg);
  --card-ink: var(--scr-card-blue-ink);
}

:root:has(#scrut-release-cards) [data-component="Columns"] > a:nth-child(4n + 2) [data-component="Card"] {
  --card-bg: var(--scr-card-yellow-bg);
  --card-ink: var(--scr-card-yellow-ink);
}

:root:has(#scrut-release-cards) [data-component="Columns"] > a:nth-child(4n + 3) [data-component="Card"] {
  --card-bg: var(--scr-card-lavender-bg);
  --card-ink: var(--scr-card-lavender-ink);
}

:root:has(#scrut-release-cards) [data-component="Columns"] > a:nth-child(4n + 4) [data-component="Card"] {
  --card-bg: var(--scr-card-mint-bg);
  --card-ink: var(--scr-card-mint-ink);
}

:root:has(#scrut-release-cards) [data-component="Columns"] > a [data-component="Card"] {
  --heading: var(--card-ink) !important;
  --body: var(--card-ink) !important;
  --foreground: var(--card-ink) !important;
  --sub-text: var(--card-ink) !important;
  background: var(--card-bg) !important;
  border-color: transparent !important;
}

:root:has(#scrut-release-cards) [data-component="Columns"] > a [data-component="Card"] p.dai-card-title {
  color: var(--card-ink) !important;
  -webkit-text-fill-color: var(--card-ink) !important;
}

:root:has(#scrut-release-cards) [data-component="Columns"] > a [data-component="Card"] span.dai-card-description,
:root:has(#scrut-release-cards) [data-component="Columns"] > a [data-component="Card"] span.dai-card-description p {
  color: var(--card-ink) !important;
  -webkit-text-fill-color: var(--card-ink) !important;
}

:root:has(#scrut-release-cards) [data-component="Columns"] > a [data-component="Card"] button[data-slot="button"] {
  color: var(--card-ink) !important;
  -webkit-text-fill-color: var(--card-ink) !important;
}