/****************************************
* Billboard
****************************************/

.billboard {
  background:  url('https://www-proficientdriving-com.is.desdriven.com/webfiles/DES/albums/layout_images/or/billboard.jpg');
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: center;
  background-size: cover;
  background-position: center;
  height: 200px;
  height: calc(200px + (650 - 200) * (100vw - 340px) / (2000 - 340));
}

.billboard .box {
  margin: auto;
  min-width: 300px;
  padding: 2rem;
}

.billboard content {
  display: block;
  border-radius: 5px;
}

.billboard h1 {
  color: #ffffff;
  font-weight: bold;
  font-size: calc(28px + (100 - 28) * (100vw - 340px) / (2000 - 340));
  font-family: Lato;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 3px 3px 2px rgba(0, 0, 0, .45);
}

.billboard .button {
  display: inline-block;
  margin-bottom: 0;
  padding: .75rem 1rem;
  border-radius: 5px;
  background: #9A1AC1;
  color: #ffffff;
  font-weight: normal;
  font-size: calc(14px + (20 - 14) * (100vw - 340px) / (2000 - 340));
  line-height: 1em;
  font-family: Lato;
  text-transform: uppercase;
}

.billboard .button:hover {
  background: #6F138B;
  color: #ffffff;
}

.billboard hr {
  border-top: 1px solid #ffffff;
}

/****************************************
* Widescreen
****************************************/

@media (min-width: 2000px) {
  .billboard {
    height: 650px;
  }

  .billboard h1 {
    font-size: 100px;
  }

  .billboard .button {
    font-size: 20px;
  }
}