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

* {
  margin: 0;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

p {
  text-wrap: pretty;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
}

:root {
/* Color Variables */
    --color-yellow: hsl(47, 88%, 63%);
    --color-white: hsl(0, 0%, 100%);
    --color-dark-grey: hsl(0,0%,7%);
    --color-light-grey: hsl(0, 0%, 42%);

/* Typography */
/* figtree-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 400;
    src: url('/fonts/figtree-v7-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* figtree-500 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 500;
    src: url('/fonts/figtree-v7-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* figtree-700 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 700;
    src: url('/fonts/figtree-v7-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* figtree-800 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 800;
    src: url('/fonts/figtree-v7-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }

/* Spacing Variables */
    --spacing-xxs: 0.25rem; /* 4px */
    --spacing-xs: 0.5rem; /* 8px */
    --spacing-s: 0.75rem; /* 12px */
    --spacing-l: 1.5rem; /* 24px */
  
}

body {
  background-color: var(--color-yellow);
  font-family: 'Figtree', sans-serif;
  line-height: 150%;
  letter-spacing: 0px;
}

.wrapper {
  width: 384px;
  height: 522px;
  background-color: var(--color-white);
  border-radius: 20px;;
  border: 2px var(--color-dark-grey) solid;
  padding: var(--spacing-l);
  box-shadow: 8px 8px var(--color-dark-grey);
  margin: auto auto;
  margin-top: 219px;

  @media (width < calc(700 / 16 * 1rem)) {
    width: 327px;
    height: 501px;
    padding: var(--spacing-s);
  
  }
}

.card__image {
  border-radius: 10px;
}

.card_wrapper {
  padding: 0px;
  
}

a {
  text-decoration: none;
}
h1 {
  
  font-weight: 800;
  font-size: 1.5rem;
  
  color: var(--color-dark-grey);
  margin-bottom: var(--spacing-s);
 
}

p {
 
  font-weight: 500;
  font-size: 1rem;
  
  color: var(--color-light-grey);
  margin-bottom: var(--spacing-l);
}
.publishedDate {
  
  font-weight: 500;
  font-size: 0.875rem;
  
  color: var(--color-dark-grey);
  margin-top: var(--spacing-s);
  margin-bottom: var(--spacing-s);
}

.btn-category{
  display: inline-block;
  font-weight: 800;
  font-size: 0.875rem;
  margin-bottom: var(--spacing-xs);
  color: var(--color-dark-grey);
  background-color: var(--color-yellow);
  padding: var(--spacing-xxs) var(--spacing-s);
  margin-top: var(--spacing-l);
  cursor: pointer;
  transition: 200ms ease-in-out;
  transition-property: background-color, color;

  &:hover {
    color: var(--color-yellow);
    background-color: var(--color-dark-grey);
  }
}

.card__author {
  display:flex;
  gap: var(--spacing-xs);
  margin-right: var(--spacing-xs);
  
  
}

.author__name{
 
  font-weight: 800;
  font-size: 0.875rem;
  
  color: var(--color-dark-grey);
  margin-bottom: 0px;
  padding-top: var(--spacing-xxs);
  
}

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

}

.attribution {
margin-top: var(--spacing-l);
text-align: center;

}