.featured {
  height: 100vh;
  margin-bottom: 120px;

  background-image: url('../images/AdobeStock_313778126-v2.jpeg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

.featured .container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;

  height: 100%;
}

.f--title {
  width: 740px;
  margin-bottom: 50px;

  font: 700 normal 5rem/1.21em 'Roboto', sans-serif;
  color: #fff;
}

.f--subtitle {
  font: 400 normal 2.14rem/1.2em 'Roboto', sans-serif;
  color: #fff;
}

@media screen and (max-width: 1200px) {
  .featured { background-attachment: scroll; }
}

@media screen and (max-width: 1024px) {
  .featured { background-position: calc(100% - 50%); }
}

@media screen and (max-width: 930px) {
  .featured { margin-bottom: 65px; }

  .f--title {
    width: 100%;
    font-size: clamp(2.6rem, 1vw, 4rem);
  }

  .f--subtitle {
    width: 100%;
    font-size: clamp(2rem, 1vw, 4rem); }

}