.paragraph-intro {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 2rem 0;
}
.paragraph-intro .page-title {
  color: currentColor;
  font-size: 2.5rem;
  line-height: 1.3;
  margin: 0;
  padding: 0 0 1rem 0;
}
.paragraph-intro .btn {
  border-radius: 10px;
  display: block;
  margin: 0 0 1rem 0;
  padding: 1rem 1.5rem;
  text-decoration: underline;
}
/* Tablet */
@media only screen and (min-width: 768px) {
  .paragraph-intro .btn {
    display: inline-flex;
    margin: 1rem 0;
    padding: 1rem 2rem;
  }
}
/* Small desktop */
@media only screen and (min-width: 960px) {
  .paragraph-intro {
    padding: 3rem 0;
  }
}
/* Large desktop */
@media only screen and (min-width: 1200px) {
  .paragraph-intro {
    padding: 4rem 0;
  }
  .paragraph-intro .page-title {
    padding: 5rem 0;
  }
}
/* Extra large desktop */
@media only screen and (min-width: 1400px) {
  .paragraph-intro .page-title {
    padding: 7rem 0;
  }
}

@media (pointer: fine) {
  .paragraph-intro .btn:hover,
  .paragraph-intro .btn:focus {
    text-decoration: none;
  }
}