/* Screens no smaller than a desktop */

/****************************************
* Typography
****************************************/

h1 {
  font-size: 50px;
}

/****************************************
* Navigation
****************************************/

nav {
  padding-left: 4rem;
}

nav ul {
  gap: 2rem;
}

nav a {
  font-size: 18px;
}

/****************************************
* Inside billboard
****************************************/

.inside-billboard {
  height: 350px;
  background-size: 1155px;
  background-position-x: calc(-10px + (100 - -10) * (100vw - 1140px) / (1400 - 1140));
}

.inside-billboard .container {
  justify-content: unset;
  align-items: center;
}

.inside-billboard .wrapper {
  display: flex;
  justify-content: center;
  width: calc(600px + (800 - 600) * (100vw - 1140px) / (1400 - 1140));
  padding: 0;
}

/****************************************
* Testimonial
****************************************/

.testimonials p {
  font-size: 22px;
}

.testimonials .author {
  font-size: 13px;
}

/****************************************
* Overlay
****************************************/

#bio.overlay .grid > div:nth-of-type(2) {
  padding: 4rem;
}

/****************************************
* Staff
****************************************/

.staff {
  height: 350px;
}

.staff-details {
  width: 250px;
}

/****************************************
* Footer
****************************************/

footer > .grid {
  grid-template-columns: 230px 230px 1fr 180px;
  gap: 3rem;
}

@media (min-width: 1300px) {
  footer > .grid {
    grid-template-columns: 230px 230px 1fr 1fr;
  }
}

@media (min-width: 1680px) {
  footer > .grid {
    grid-template-columns: 230px 230px 1fr 300px 200px;
    gap: 4rem;
  }

  footer .seal {
    display: block !important;
  }
}

/****************************************
* Misc
****************************************/

.width--desktop {
  margin: 0 auto;
  max-width: 1140px;
  padding: 0 3rem 3rem 3rem;
}