:root {
  --paragraph-color-light: hsl(212, 6%, 44%);
  --paragraph-color-dark: hsl(228, 12%, 48%);
  --title-color: hsl(234, 12%, 34%);
  --border-cyan: hsl(180, 62%, 55%);
  --border-red: hsl(0, 78%, 62%);
  --border-orange: hsl(34, 97%, 64%);
  --border-blue: hsl(212, 86%, 64%);
  --black: hsl(0, 0%, 0%);
  --block-width: clamp(35ch, calc(35ch + 1vw), 40ch);
  --border-shadow: hsla(211, 36%, 59%, 0.304);
}
html {
  margin: 0;
  padding: 0;
  font-size: 62.5%;
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: "Poppins", sans-serif;
}
.work-area {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header"
    "main"
    "footer";
  width: 100%;
}
header {
  grid-area: header;
  text-align: center;
  justify-self: center;
}
main {
  padding: 1rem;
  grid-area: main;
  justify-self: center;
}
footer {
  grid-area: footer;
}
.title-1 {
  font-weight: 200;
  margin-block: 0;
}
.title-1,
.title-2 {
  font-size: clamp(2.2rem, 2vw + 1rem, 2.5rem);
}
.title-2 {
  font-weight: 600;
  margin-block-start: 0;
}
.title-p {
  width: clamp(36ch, 50vw, 60ch);
  font-weight: 400;
  font-size: 1.2rem;
}
.block {
  display: grid;
  grid-template-rows: auto 1fr auto;
  width: var(--block-width);
  aspect-ratio: 1 / 0.8;
  padding: 2rem;
  box-shadow: 0 0.6rem 1.5rem 0 var(--border-shadow);
  margin-block-end: 2em;
}
.block p {
  font-size: 1rem;
  color: var(--paragraph-color-light);
  font-weight: 400;
  margin: 0.5rem 0;
}
.block h2 {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0;
  color: var(--title-color);
}
.block img {
  align-self: flex-end;
  justify-self: flex-end;
  width: 4rem;
}
.cyan {
  border-top: 0.5em solid var(--border-cyan);
}
.red {
  border-top: 0.5em solid var(--border-red);
}
.orange {
  border-top: 0.5em solid var(--border-orange);
}
.blue {
  border-top: 0.5em solid var(--border-blue);
}
.attribution {
  text-align: center;
  font-size: 1rem;
  margin: 1rem;
  color: var(--paragraph-color-dark);
}
.attribution a {
  color: var(--black);
  text-decoration: none;
}
.attribution a:hover {
  transition: 150ms ease;
  color: var(--paragraph-color-light);
}
@media (prefers-reduced-motion: reduce) {
  .attribution a:hover {
    transition: 0ms ease;
  }
}
@media screen and (min-width: 60rem) {
  main {
    display: grid;
    grid-template-columns: repeat(3, minmax(var(--block-width), auto));
    grid-template-rows: repeat(4, minmax(7rem, auto));
    width: 90%;
    margin-inline: auto;
    gap: clamp(1rem, 2vw, 2rem);
    place-content: flex-start center;
  }
  .block {
    margin-block-end: initial;
  }
  .cyan {
    grid-column: 1;
    grid-row: 2 / span 2;
  }
  .red {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
  .orange {
    grid-column: 2;
    grid-row: 3 / span 2;
  }

  .blue {
    grid-column: 3;
    grid-row: 2 / span 2;
  }
}