*,
*::after,
*::before {
  box-sizing: border-box;
}


:root {
  color-scheme: light dark;

  --hue: 280;

  --swatch-1: oklch(98% 0.03 var(--hue));
  --swatch-2: oklch(94% 0.05 var(--hue));
  --swatch-3: oklch(88% 0.1 var(--hue));
  --swatch-4: oklch(78% 0.18 var(--hue));
  --swatch-5: oklch(65% 0.28 var(--hue));
  --swatch-6: oklch(50% 0.37 var(--hue));
  --swatch-7: oklch(38% 0.33 var(--hue));
  --swatch-8: oklch(28% 0.26 var(--hue));
  --swatch-9: oklch(20% 0.18 var(--hue));
  --swatch-10: oklch(18% 0.1 var(--hue));
  --swatch-11: oklch(10% 0.05 var(--hue));

  --base: var(--swatch-5);

  --complementary: oklch(from var(--base) l c calc(h + 180));

  --split-complementary-1: oklch(from var(--base) l c calc(h + 150));
  --split-complementary-2: oklch(from var(--base) l c calc(h - 150));

  --triadic-1: oklch(from var(--base) l c calc(h + 120));
  --triadic-2: oklch(from var(--base) l c calc(h - 120));

  --analogous-1: oklch(from var(--base) l c calc(h + 30));
  --analogous-2: oklch(from var(--base) l c calc(h - 30));

  --secondary: var(--split-complementary-1);
  --accent: var(--split-complementary-2);
  --text-1: light-dark(var(--swatch-11), var(--swatch-1));
  --text-2: light-dark(var(--swatch-8), var(--swatch-3));
  --bg-1: light-dark(var(--swatch-1), var(--swatch-11));
  --bg-2: light-dark(var(--swatch-2), var(--swatch-10));
}

.cards {
  display: flex;
  flex: 1 0 auto;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 0;
  margin: 0;
  list-style: none;


  li {
    box-shadow: 0 0 0.2rem oklch(0.8 0.1 200 / 0.4), 0 0 2rem oklch(0.9 0.15 200 / 0.3);
    border-radius: 3%;
    position: relative;
    overflow: hidden;

    display: flex;
    flex: 0 0 14rem;
    flex-direction: column;

    background-color: var(--bg-2);
    border: 0.2rem groove var(--secondary);
    color: var(--text-1);



    .content {
      margin: auto;
      padding-block-end: 1rem;
      padding-inline: 1rem;
    }

    picture {
      order: -1;
    }

  }

  .overlay-link {
    position: absolute;
    inset: 0;

    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
  }
}

.container {
  max-width: 80rem;
  padding-inline: 1rem;
  margin: auto;
}

body {
  padding: 0;
  margin: 0;
}

@media (min-width: 40rem) {
  body {}
}


@media (min-width: 70rem) {
  body {}
}