body {
  background: radial-gradient(100% 100% at 0% 0%, rgba(237, 36, 155, 0.1) 0%, rgba(250, 175, 49, 0.1) 55.21%, rgba(217, 217, 217, 0) 100%);
  background-attachment: fixed;
  font-family: "Lora", serif;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
  color: #263A33;
  text-align: left;
  font-size: 1.2rem;
}

.grid-x, .intro {
  padding: 2rem;
}

.intro-container {
  display: flex;
  width: 100%;
  justify-content: space-around;
  height: 85vh;
  align-items: center;
}

.outro {
  padding-top: 12rem;
}

a {
  color: #D46139;
}

a:visited {
  color: #D46139;
}

a:hover {
  color: #D46139;
  text-decoration: underline;
}

.intro .h2 {
  text-align: center;
}

h1 {
  font-family: "Lora", serif;
  font-size: 72px;
  font-weight: 700;
  line-height: 1;
  margin-top: 2rem;
}

h2 {
  font-family: "Lora", serif;
  font-size: clamp(1.2rem, 4vw, 2.2rem);
  text-transform: uppercase;
  font-style: italic;
}

h3 {
  font-family: "Lora", serif;
  font-size: clamp(1.4rem, 2vw, 1.8rem);
}

p {
  font-family: "Lora", serif;
  font-size: clamp(1.1rem, 1vw, 1.2rem);
}

.photos img, .swiper img {
  border-radius: 8px;
}

.swiper {
  padding-left: 48px;
  margin-top: 14vh;
  margin-bottom: 10vh;
}

.swiper img {
  margin-bottom: 24px;
}

.swiper a {
  font-size: 24px;
  color: #353535;
}

.swiper a:hover {
  color: #D46139;
  text-decoration: none;
}

.swiper p {
  font-size: 16px;
}

footer .cell {
  display: flex;
  justify-content: space-between;
}

.branding {
  background-color: #FDF2EE;
  border-radius: 16px;
  padding-left: 32px !important;
  padding-right: 32px !important;
  padding-top: 32px !important;
  padding-bottom: 32px !important;
}

footer a, footer p {
  font-family: "Lora", serif;
  font-size: clamp(1.2rem, 3vw, 1rem);
  text-transform: uppercase;
  font-style: italic;
}

@media only screen and (max-width: 64em) { 
  body {
    font-size: 1.0rem;
  }
  
  .grid-x {
    padding: 2rem;
  }
  .intro {
    padding-bottom: 6rem;
  }
  .outro {
    padding-top: 6rem;
  }
  .intro p {
    text-align: left;
    margin-top: 32px;
  }
  .sunny {
    right: 20vw;
    top: -10vh;
  }
}

@media only screen and (max-width: 40em) {
  .grid-x {
    padding: 1rem;
    padding-top: 1.5rem;
  }
  h1 {
    font-size: 38px
  }
  .intro-container {
    height: 45vh;
  }
  .intro {
    padding-bottom: 6rem;
  }
  .swiper {
    padding-left: 24px;
  }
  .outro {
    padding-top: 6rem;
  }
  .trio .medium-4 .profile {
    margin: 0 auto;
    margin-bottom: 2rem;
    max-width: 300px;
  }
  .intro .logo img,
  footer .logo img {
    height: 56px;
    width: auto;
  }
  .trio div:nth-child(1) {
    text-align: center;
  }
  footer .cell {
    justify-content: baseline;
    flex-direction: column;
  }
}