@font-face {
  font-family: 'Outfit';
  src: url('./assets/fonts/Outfit.woff2') format('woff2');
  font-display: swap;
  font-style: normal;
  font-weight: 100 900;
}

html {
  box-sizing: border-box;
}

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

body {
  min-block-size: 100vh;
  min-block-size: 100dvh;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-base);
  font-size: 1rem;
  background-color: var(--slate-300)
}

:root {
  --white: hsl(0, 0%, 100%);
  --black: hsl(0, 0%, 0%);
  --slate-300: hsl(212, 45%, 89%);
  --slate-500: hsl(216, 15%, 48%);
  --slate-900: hsl(218, 44%, 22%);
  --ff-base: 'Outfit', sans-serif;
  --fs-large: 1.375rem;
  --fs-medium: .9375rem;
  --fs-small: .75rem;
  --rad-card: 20px;
  --rad-image: 10px;
}

.card {
  inline-size: 20rem;
  margin-top: 6rem;
  padding: 1rem 1rem 1.6rem;
  background-color: var(--white);
  text-align: center;
  border-radius: var(--rad-card);
  box-shadow: 0 25px 25px hsl(from var(--black) h s l /.04);
}

.card__link {
  display: inline-block;
  text-decoration: none;
  border-radius: var(--rad-image);
}

.card__image {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
  font-style: italic;
  border-radius: var(--rad-image);
}

.card__title {
  margin-top: 1.15em;
  font-size: var(--fs-large);
  font-weight: 700;
  color: var(--slate-900);
  line-height: 1.18;
}

.card__description {
  margin-top: 1em;
  padding-inline: .8em;
  font-size: var(--fs-medium);
  font-weight: 400;
  color: var(--slate-500);
  letter-spacing: .2px;
  line-height: 1.4;
}

.footer {
  padding-block: 2rem;
}

.attribution {
  font-size: var(--fs-small);
  font-weight: 500;
  text-align: center;
  color: var(--slate-900);
}

.attribution__link {
  margin-inline: .3em;
  font-weight: 600;
  text-decoration: none;
  color: inherit;
  position: relative;
}

.attribution__link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  right: 0;
  inline-size: 100%;
  block-size: 2px;
  background-color: currentColor;
  transition: inline-size .2s ease;
}

.attribution__link:hover::after {
  inline-size: 0;
}

.card__link:focus-visible,
.attribution__link:focus-visible {
  outline: 2px dotted var(--slate-900);
  outline-offset: 2px;
}

.attribution__link:focus-visible::after {
  inline-size: 0;
}