/* base */
:root {
  --color-yellow: hsl(47, 88%, 63%);
  --color-white: hsl(0, 0%, 100%);
  --color-gray-500: hsl(0, 0%, 42%);
  --color-gray-950: hsl(0, 0%, 7%);

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-lg: 1.25rem;

  --font-normal: 500;
  --font-bold: 800;
}

/* resets */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font: inherit;
}

img {
  display: block;
  max-width: 100%;
}

/* for screenreaders; visually hidden*/
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* layout & styling */
body {
  font-family: "Figtree", sans-serif;
  font-optical-sizing: auto;
  font-weight: var(--font-normal);
  font-style: normal;

  line-height: 1.5;

  background-color: var(--color-yellow);
}

main {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

article {
  width: 327px;

  padding: 24px;
  border-radius: 20px;

  background-color: var(--color-white);

  display: flex;
  flex-direction: column;
  justify-content: center;

  gap: 24px;

  border: 1px solid var(--color-gray-950);
  box-shadow: 8px 8px 0 var(--color-gray-950);
}

.illustration {
  margin-inline: auto;
  background-image: url("assets/images/illustration-article-sm.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 200px;
  border-radius: 10px;
}

@media (width >= 48rem) {
  article {
    width: 384px;
  }
  .illustration {
    background-image: url("assets/images/illustration-article-lg.svg");
  }
}

.content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.badge {
  background-color: var(--color-yellow);
  padding: 4px 12px;
  border-radius: 4px;

  font-weight: var(--font-bold);
  font-size: var(--text-xs);
}

.publish-text {
  font-size: var(--text-xs);
}

.title {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
}

.link {
  color: var(--color-gray-950);
  transition: color 0.2s ease;
  text-decoration: none;
}

.link:hover {
  color: var(--color-yellow);
}

.link:focus-visible {
  outline: 2px solid var(--color-gray-950);
  outline-offset: 2px;
  border-radius: 2px;
}

.desc {
  color: var(--color-gray-500);
  font-size: var(--text-sm);
}

.author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.author-img {
  border-radius: 50%;
}

.author-name {
  font-weight: var(--font-bold);
  font-size: var(--text-sm);
}