@font-face {
  font-family: "Lexendeca";
  font-weight: 400;
  src: url("fonts/lexenddeca-regular-webfont.woff2") format("woff2"),
    url("fonts/lexenddeca-regular-webfont.woff") format("woff");
}

@font-face {
  font-family: "Inter";
  font-weight: 400;
  src: url("fonts/inter-regular-webfont.woff2") format("woff2"),
    url("fonts/inter-regular-webfont.woff") format("woff");
}

@font-face {
  font-family: "Inter";
  font-weight: 700;
  src: url("fonts/inter-bold-webfont.woff2") format("woff2"),
    url("fonts/inter-bold-webfont.woff") format("woff");
}

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

* {
  margin: 0;
}

html:focus-within {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
}

input,
textarea,
button,
select {
  font: inherit;
}

ul,
ol {
  list-style: none;
}

a:not([class]) {
  text-decoration-skip-ink: all;
}

@supports (min-height: 100dvh) {
  body {
    min-height: 100dvh;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

:root {
  --main-bg-clr: hsl(233, 47%, 7%);
  --card-bg-clr: hsl(244, 38%, 16%);
  --accent-clr: hsl(277, 64%, 61%);

  --clr-200: hsla(0, 0%, 100%, 0.6);
  --clr-300: hsla(0, 0%, 100%, 0.75);
  --clr-400: hsl(0, 0%, 100%);

  --fz-400: 0.9375rem;

  --space-400: 1rem;
  --space-450: 1.5rem;
  --space-500: 2rem;
  --space-600: 3rem;
}

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Lexend+Deca:wght@700;900&display=swap");

/* base */
body {
  padding: 0;
  font-size: var(--fz-400);
  color: var(--clr-300);
  background-color: var(--main-bg-clr);
  font-weight: 400;
  font-family: "Lexendeca", sans-serif;
}

/* composition */
.even-column {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--size), 100%), 1fr));
}

/* utility */
.text-inter {
  font-family: "Inter", sans-serif;
}
.text-accent {
  color: var(--accent-clr);
}
.text-strong {
  color: var(--clr-400);
  font-weight: 700;
}
.text-lighter {
  color: var(--clr-200);
}
.text-fz_md {
  font-size: calc(1rem * 1.25);
}
.text-spread {
  letter-spacing: 0.1em;
}
.bg-accent {
  background-color: var(--accent-clr);
}
.wrapper {
  display: grid;
  place-content: center;
}
.img-blend_accent {
  mix-blend-mode: multiply;
}

/* block */
.card {
  background-color: var(--card-bg-clr);
  border-radius: 0.5rem;
  width: min(100% - var(--space-500) * 2, 60rem);
  margin-inline: auto;
  overflow: hidden;
}
.card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.content {
  display: grid;
  gap: var(--space-500);
  text-align: center;
  padding: var(--padding, var(--space-500)) var(--padding, var(--space-500));
}
.content__item:not(:last-child) {
  margin-block-end: var(--space-400);
}
.content h1 {
  margin-block-end: var(--space-400);
}

/* exception */
[data-type="card"] {
  --size: 15.625rem;
}
[data-type="list"] {
  --size: 10rem;
}

@media (min-width: 35rem) {
  .card header {
    grid-area: 1 / 2 / 2 / 3;
  }

  .content {
    --padding: var(--space-600);

    text-align: left;
  }

  [data-type="list"] {
    --size: 6rem;
  }
}