@import "./mordern-reset.css";
@import "./base.css";

body {
  --bg-color: var(--gray);
  --text-color: var(--white);

  background-color: var(--bg-color);
  color: var(--text-color);
}

a {
  color: inherit;
  text-decoration: none;
}

.container {
  display: grid;
  grid-template-columns: minmax(280px, 1fr);
  column-gap: 2rem;

  @media (min-width: 48rem) {
    grid-template-columns: repeat(2, minmax(280px, 1fr));
  }

  @media (min-width: 80rem) {
    grid-template-columns: repeat(3, minmax(280px, 1fr));
  }

  h1 {
    grid-column: 1 / -1;
    margin-block: 1rem;

    &::before {
      content: "🎁";
      margin-inline-end: 0.5rem;
    }
  }

  .column {
    --bg-color: var(--silver);
    --text-color: var(--black);

    background-color: var(--bg-color);
    color: var(--text-color);
    padding: 1rem;
    border-radius: 0.5rem;

    ul {
      columns: 2;
      column-rule: 1px solid currentColor;
      column-gap: 4rem;
    }
  }

  h2 {
    --text-color: var(--gray);
    margin-block: 1rem;

    color: var(--text-color);
    font-size: 1.8rem;

    &::before {
      content: "💜";
      margin-inline-end: 0.5rem;
    }
  }

  li {
    margin-block: 0.5rem;
  }
}