body {
  background-image: url("images/morning-sky-background.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position-y: bottom;
  min-height: 100vh;
  margin: 0;
}

#container {
  width: 720px;
  max-width: 100vw;
  margin: 0 auto;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  justify-content: center;
}

#title,
#cards {
  margin: 1.25rem auto;
}

#title > img {
  width: 300px;
  max-width: 50vw;
  height: auto;
}

#cards {
  display: flex;
  flex-direction: row;
}

#cards > a > img.card {
  width: 300px;
  max-width: 50vw;
  height: auto;
}

#card_spacer {
  background-image: url("images/plus.svg");
  background-size: 40px 40px;
  background-position: center;
  background-repeat: no-repeat;
  width: 50px;
  height: 50px;
  padding: 10px;
  margin: auto;
  display: none;
}

@media screen and (min-width: 720px) {
  #cards {    
    background-color: #ffffff;
    padding: 1.25rem;
  }

  #cards,
  #cards img.card {
    border-radius: 40px;
  }

  #cards > a > img.card {
    border: 2px solid #FFFFFF;
    transition: 250ms ease;
  }

  #cards > a:hover > img.card {
    box-shadow: 0 0 15px rgba(0,0,0,0.4)
  }

  #cards > a:hover > #pearshop_card {
    border: 2px solid #E1E455;
  }

  #card_spacer {
    display: block;
  }
}