@import "_reset.css";
@import "_utils.css";
@import "_button.css";
@import "_ui-palette.css";

:root {
  --bg-color: hsl(0, 0%, 80%);
  --color: hsl(0, 0%, 10%);
  --nav-bg-color: hsl(0, 0%, 95%);
  --nav-border-color: hsl(0, 0%, 85%);

  --disk--a: #000;
  --disk--b: #fff;
  --disk--c: #000;
  --club--a: #fff;
  --club--b: #fff;
  --club--c: #fff;
  --club--d: #000;
  --club--e: #fff;
  --strings: #000;
  --strings--a: var(--strings);
  --strings--b: var(--strings);
  --strings--c: var(--strings);
  --frames: #000;
  --frame--a: var(--frames);
  --frame--b: var(--frames);
  --frame--c: var(--frames);
  --text: #fff;
  --date: #fff;
  --diamonds: #fff;
  --diamonds77: var(--diamonds);
  --diamondsKangaroo: var(--diamonds);
  --labels: #000;
  --labels77: var(--labels);
  --labelsKangaroo: var(--labels);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: hsl(0, 0%, 50%);
    --color: hsl(0, 0%, 100%);
    --nav-bg-color: hsl(0, 0%, 15%);
    --nav-border-color: hsl(0, 0%, 25%);
  }
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--bg-color);
  color: var(--color);
  font-family: sans-serif;
}

nav {
  padding: 0.5rem;
  margin: 0.5rem;
  background: var(--nav-bg-color);
  border: 1px solid var(--nav-border-color);
  border-radius: 8px;
  font-size: 0.825rem;
  line-height: 1;
}

.grid {
  padding: 0.5rem;
  margin: 0.5rem;
  width: calc(100% - 1em);
  overflow: auto;
  flex-grow: 1;
  text-align: center;

  display: grid;
  grid-template-columns: 90% 70% 50%;
  gap: 1rem;
}

.grid__column {
  display: flex;
  flex-direction: column-reverse;
  justify-content: start;
  align-items: center;
  gap: 0.5rem;
  border: 2px solid;
  padding: 2rem;
}

.grid img,
.grid svg {
  max-width: 100%;
  height: auto;
  aspect-ratio: 1;
}

.grid h2 {
  font-family: "Cormorant", serif;
  font-weight: 500;
  font-size: 2rem;
  line-height: 1;
  margin: 2rem 0 0 0;
}

.grid p {
  font-size: 0.825rem;
  line-height: 1.1;
  margin: 0.25em 0;
  white-space: preserve nowrap;
}

/* optional: slightly tighter on small screens */
@media (min-width: 1024px) {
  body {
    flex-direction: row;
    overflow: hidden;
  }

  nav {
    width: 320px;
    height: calc(100vh - 1em);
  }
  .grid {
    grid-template-columns: 3fr 2fr 1fr;
    width: auto;
    margin-inline-start: 0rem;
  }
}