@font-face {
  font-family: 'Lato';
  src: url('../fonts/lato-300.woff2') format('woff2');
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: 'Lato';
  src: url('../fonts/lato-400.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Lato';
  src: url('../fonts/lato-700.woff2') format('woff2');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: 'Oswald';
  src: url('../fonts/oswald-400.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Oswald';
  src: url('../fonts/oswald-600.woff2') format('woff2');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: 'Playfair Display';
  src: url('../fonts/playfair-display-700.woff2') format('woff2');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

/* Desktop uses the optimized 2400 px hero. Phones receive a dedicated portrait
   crop so Safari does not enlarge a narrow slice of the landscape image. */
@media (max-width: 700px) {
  .hero-background {
    background-image: url('../app/assets/header-mobile.jpg') !important;
    background-position: center top !important;
  }
}

@font-face {
  font-family: 'Playfair Display';
  src: url('../fonts/playfair-display-700-italic.woff2') format('woff2');
  font-style: italic;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: 'Playfair Display';
  src: url('../fonts/playfair-display-900.woff2') format('woff2');
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}