:root {
  font-size: 62.5%;

  /* FONT */
  --font-stack: "Figtree", sans-serif;
  --font-size-xs: 1.4rem;
  --font-size-s: 1.6rem;
  --font-size-l: 2.4rem;
  --font-weight-m: 500;
  --font-weight-l: 800;

  /* LINE-HEIGHT */
  --line-height-m: 1.5;

  /* COLOR */
  --white: hsl(0, 0%, 100%);
  --primary-color: hsl(47, 88%, 63%);
  --grey500: hsl(0, 0%, 42%);
  --grey950: hsl(0, 0%, 7%);

  /* BORDER-RADIUS */
  --border-radius-s: 4px;
  --border-radius-m: 10px;
  --border-radius-l: 20px;
  --border-radius-50pc: 50%;

  /* PADDING */
  --padding-xs: 0.4rem;
  --padding-s: 1.2rem;
  --padding-l: 2.4rem;

  /* GAP */
  --gap-s: 1.2rem;
  --gap-l: 2.4rem;
}

*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  margin: 0;
  padding: 0;
}

html {
  width: 100%;
  height: 100%;
  line-height: var(--line-height-m);
}

body {
  width: 100%;
  height: 100%;
  font-family: var(--font-stack);
  background-color: var(--primary-color);
  padding: 2.4rem;
  display: grid;
  place-content: center;
  color: var(--grey950);
}

img {
  width: 100%;
  display: block;
  line-height: 0;
  object-fit: cover;
}

/* CARD */
.card-container {
  max-width: 384px;
  border: 1px solid var(--grey950);
  border-radius: var(--border-radius-l);
  box-shadow: 8px 8px 0 0 var(--grey950);
  background-color: var(--white);
  padding: var(--padding-l);
  display: flex;
  flex-direction: column;
  gap: var(--gap-l);
  cursor: pointer;

  &:hover,
  &:focus,
  &:active {
    .card-title {
      color: var(--primary-color);
    }
  }
}

.card-image-container {
  border-radius: var(--border-radius-m);
  overflow: hidden;
}

.card-image {
  max-height: 200px;
}

.card-content-container {
  display: flex;
  flex-direction: column;
  gap: var(--gap-s);
}

.card-label {
  font-weight: var(--font-weight-l);
  font-size: var(--font-size-xs);
  padding: var(--padding-xs) var(--padding-s);
  background-color: var(--primary-color);
  border-radius: var(--border-radius-s);
  width: fit-content;
}

.card-date {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-m);
}

.card-content-container h1 {
   font-size: var(--font-size-l);
  font-weight: var(--font-weight-l);
}


.card-description {
  color: var(--grey500);
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-m);
}

.card-avatar-container {
  display: flex;
  align-items: center;
  gap: var(--gap-s);
}

.card-avatar-image {
  max-width: 32px;
  border-radius: var(--border-radius-50pc);
}

.card-avatar-name {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-l);
}

footer {
  visibility: hidden;
}