html {
  scroll-behavior: smooth;
}
body > header{
  background-image:none;
  margin: 6rem 0 2rem 0;
  padding: 2rem;
}
body > header h1{
  font-size: 2.4em;
  line-height: 120%;
  font-weight: bold;
  margin-bottom: 0.5em;
}
main > section h3{
  font-size: 1.2em;
  font-weight: bold;
  margin-bottom: 0.5em;
}
figure{
  position:relative;
}
figcaption{
  position: absolute;
  top: 0;
  left: 0;
  margin: 1em;
  padding: 1em;
  background-color: var(--turquoise);
  color: var(--blueberry);
  border-radius: var(--rounded);
}
body:before, body:after{
  left: 2rem;
}


@media (max-width: 30em) {
  body > header{
    padding: 1rem;
  }
  main > section{
    padding: 1rem;
  }
  figcaption{
    margin: 0.5rem 1rem;
    padding: 0.5rem 1rem;

  }
  body > header h1{
    font-size: 2em;
  }
  body:before, body:after{
    transform: scale(.7);
    left: -3rem;
  }
}
@media (max-width: 25em) {
  body > header h1{
    font-size: 1.6em;
  }
  figure{
    margin: 1rem -1rem;
  }
}
@media (max-width: 22em) {
  body > header h1{
    font-size: 1.4em;
  }
}