@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');

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

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

  /* font */
  --fontWeight-xb: 800; 
  --fontWeight-md: 500; 
  --lineHeight: 150%;
  --font-xlg: 1.5rem;
  --font-lg: 1.25rem;
  --font-md: 1rem;
  --font-sm: 0.875rem;
  --font-xsm: 0.75rem;

  /* spacing */
  --gap-lg: 1.5rem;
  --gap-md: 0.75rem;
  --padding-lg: 1.5rem;
  --padding-md: 0.75rem;
  --padding-sm: 0.25rem;
  --border-radius-lg: 1.25rem;
  --border-radius-md: 0.625rem;
  --border-radius-sm: 0.25rem;
}


body {
  min-height: 100vh;
  display: grid;
  place-content: center;
  background-color: var(--yellow);
  font-family: "Figtree", sans-serif;
  font-weight: var(--fontWeight-md);
  color: var(--gray-950);
}

img {
  display: block;
}

.container {
  display: flex;
  flex-direction: column;
  gap: var(--gap-lg);
  width: 20.4375rem;
  background-color: white;
  padding: var(--padding-lg);
  border-radius: var(--border-radius-lg);
  box-shadow: 8px 8px 0px rgb(0,0,0);
  border: 1px solid var(--gray-950);
}

.blog-image {
  width: 279px;
  height: 200px;
  border-radius: var(--border-radius-md);
  object-fit: cover;
}

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

.card-content__category {
  background-color: var(--yellow);
  width: fit-content;
  padding: var(--padding-sm) var(--padding-md);
  font-weight: var(--fontWeight-xb);
  font-size: var(--font-xsm);
  line-height: var(--lineHeight);
  border-radius: var(--border-radius-sm);
}

.card-content__publish-date {
  font-size: var(--font-xsm);
  line-height: var(--lineHeight);
}

.card-content__title {
  font-size: var(--font-lg);
  font-weight: var(--fontWeight-xb);
  line-height: var(--lineHeight);
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.card-content__title:hover,
.card-content__title:focus {
  color: var(--yellow);
}


.card-content__description {
  color: var(--gray-500);
  font-size: var(--font-sm);
  line-height: var(--lineHeight);
}

.author {
  display: flex;
  align-items: center;
  gap: var(--gap-md);
  width: fit-content;
}

.author__image {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.author__name {
  font-weight: var(--fontWeight-xb);
  font-size: var(--font-sm);
  line-height: var(--lineHeight);
}


/* media query */
/* 1120px breakpoint for desktop */
@media screen and (min-width: 1120px) {
  .container {
    width: 24rem;
  }

  .blog-image {
    width: 336px;
    height: 200px; 
  }

  .card-content__category {
    font-size: var(--font-sm);
  }

  .card-content__publish-date {
    font-size: var(--font-sm);
  }

  .card-content__title {
    font-size: var(--font-xlg);
  }

  .card-content__description {
    font-size: var(--font-md);
  }
}