/* Screens no smaller than a desktop */

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

h1 {
  font-size: 40px;
}

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

footer h2,
.billboard h2 {
  font-size: 28px;
}

h2 {
  font-size: 22px;
}

h3 {
  font-size:20px;
}

/****************************************
* Header
****************************************/

header .logo {
  width: auto;
  max-width: none;
}

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

nav li button.button,
nav li a.button {
  padding: .75rem 2rem;
  font-size: 18px;
}

/****************************************
* Billboard grid
****************************************/

.billboard.grid {
  grid-template-columns: 1fr 1fr;
  height: 500px;
}

.billboard.grid .padding {
  padding: 3rem 4rem;
}

.billboard.grid .img-container:before,
.billboard.grid .img-wrapper {
  margin: 0 0 0 51px;
}

.billboard.grid .spread .img-wrapper {
  margin-left: 60px;
}

.billboard.grid .img-wrapper .img {
  left: -50px;
}

/****************************************
* Photos grid
****************************************/

.photos.grid > img:first-of-type {
  grid-column: span 2;
}

.photos.reverse.grid > img:first-of-type,
.photos.reverse.grid > img:nth-of-type(2) {
  grid-column: span 1;
}

.photos.reverse.grid > img:last-of-type {
  grid-column: span 2;
}

/****************************************
* Form
****************************************/

form > .grid {
  grid-template-columns: 1fr auto 1fr;
}

form .no-margin--desktop input {
  margin: 0;
}

form > .grid > div:last-of-type {
  display: flex;
  flex-direction: column;
  grid-column: span 1;
}

textarea {
  flex-grow: 1;
}

/****************************************
* Grid
****************************************/

.col-1-auto--desktop {
  grid-template-columns: 1fr auto;
}