@import url("https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;500&display=swap");
html { box-sizing: border-box; }

*, *:before, *:after { box-sizing: inherit; }

body { background-color: #f9f9f9; color: #262626; font-weight: 400; line-height: 1.6; margin: auto; text-align: center; font-family: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; }
@supports (font-variation-settings: normal) { body { font-family: "Barlow", "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; } }

h1, h2, h3, h4, h5, h6 { font-weight: 400; line-height: 1.2; margin-bottom: 1rem; margin-top: 0; }

h1 { color: #f9f9f9; font-size: 3rem; text-transform: uppercase; letter-spacing: 0.05rem; }
h1 .tagline { color: #ffd922; display: block; font-size: 1.375rem; letter-spacing: 0.05rem; }
@media only screen and (min-width: 900px) { h1 { font-size: 4rem; }
  h1 .tagline { font-size: 1.85rem; } }
@media only screen and (min-width: 1200px) { h1 { font-size: 5rem; }
  h1 .tagline { font-size: 2.35rem; } }

h2 { font-size: 1.9rem; }

h3 { font-size: 1.25rem; }

p { margin-top: 0; margin-bottom: 1rem; margin-left: auto; margin-right: auto; max-width: 40rem; }

ul, ol { margin-top: 0; margin-bottom: 1rem; }

a { color: inherit; text-decoration: none; }

hr { background-color: #ffd922; border: none; height: 0.5rem; margin: 2rem auto; max-width: 25rem; width: 100%; }

.uppercase { text-transform: uppercase; letter-spacing: 0.05em; }

.wrapper { margin: auto; }

.section-1 { background-color: #0071b9; padding: 4rem 2rem 2rem 2rem; }
.section-1 > p, .section-1 > ul, .section-1 > dl { max-width: 60rem; margin-left: auto; margin-right: auto; }

.section-2 { padding: 4rem 2rem; border: 10px solid #0071b9; border-top: 0; margin-left: 1rem; margin-right: 1rem; margin-bottom: 1rem; }
.section-2 > p, .section-2 > ul, .section-2 > dl { max-width: 60rem; margin-left: auto; margin-right: auto; }

@media only screen and (min-width: 900px) { .section-1, .section-2 { display: grid; grid-template-columns: 3rem 18rem 25rem 3rem; grid-template-rows: auto; column-gap: 4rem; justify-content: center; } }
@media only screen and (min-width: 1200px) { .section-1, .section-2 { grid-template-columns: 5rem 25rem 45rem 5rem; } }

@media only screen and (min-width: 1200px) { .section-1 { grid-template-rows: repeat(7, 1fr); } }

@media only screen and (min-width: 900px) { h1 { grid-column-start: 2; grid-row-start: 1; grid-row-end: span 2; }
  .subheadline { align-self: center; grid-column-start: 2; grid-row-start: 2; grid-row-end: span 1; } }
@media only screen and (min-width: 900px) and (min-width: 1200px) { .subheadline { align-self: start; grid-row-start: 3; } }

@media only screen and (min-width: 900px) { hr { align-self: start; grid-column-start: 2; grid-row-start: 3; grid-row-end: span 1; margin: 0 auto; } }
@media only screen and (min-width: 900px) and (min-width: 1200px) { hr { align-self: center; grid-row-start: 4; } }

@media only screen and (min-width: 900px) { .contact { align-self: center; grid-column-start: 2; grid-row-start: 4; grid-row-end: span 5; }
  .description { grid-column-start: 3; grid-row-start: 1; grid-row-end: span 1; }
  .testimonial { grid-column-start: 3; grid-row-start: 2; grid-row-end: span 2; }
  .covers { grid-column-start: 3; grid-row-start: 4; grid-row-end: span 5; align-content: center; }
  .pricing { grid-column-start: 2; grid-row-start: 1; grid-row-end: span all; } }
@media only screen and (min-width: 900px) and (min-width: 1200px) { .pricing { align-self: end; margin-bottom: 1rem !important; } }

@media only screen and (min-width: 900px) { .poets { grid-column-start: 2; grid-column-end: 4; grid-row-start: 1; } }
.covers { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; margin-left: auto; margin-right: auto; max-width: 40rem; }
.covers img { max-width: 20%; margin: 0.5rem; }
@media only screen and (min-width: 1200px) { .covers { margin-top: -3rem; } }

.subheadline { color: #f9f9f9; font-size: 1.2rem; line-height: 1.5; }

.description { color: #ffd922; font-size: 1.8rem; font-weight: 500; letter-spacing: 0.05rem; line-height: 1.2; margin-bottom: 1rem; padding-top: 1rem; }

.testimonial { color: #f9f9f9; font-size: 1.2rem; padding-bottom: 2rem; }
.testimonial p { margin-bottom: 0; }

.testimonial-source { display: block; text-transform: uppercase; letter-spacing: 0.05rem; }

.contact { color: #f9f9f9; font-size: 1.3rem; margin-top: 3rem; }
@media only screen and (min-width: 900px) { .contact { margin-top: 0; } }
.contact h2 { font-size: 1.6rem; letter-spacing: 0.05rem; text-transform: uppercase; }
.contact .contact-guidance { font-weight: 300; }

.pricing { border: 0.25rem solid #0071b9; color: #0071b9; font-size: 1.3rem; font-weight: 500; height: 11.5em; margin-bottom: 4rem; margin-left: auto; margin-right: auto; max-width: 25rem; padding: 1rem; }
@media only screen and (min-width: 1200px) { .pricing { font-size: 1.6rem; height: 10.5em; } }
.pricing h2 { font-size: 1.6rem; font-weight: 500; letter-spacing: 0.05rem; text-transform: uppercase; }
.pricing ul { list-style-type: none; padding: 0; letter-spacing: 0.05rem; text-transform: uppercase; }
.pricing p { font-weight: 300; }
.pricing :last-child { margin-bottom: 0; }

.poets h2, .poets h3 { font-size: 1rem; font-weight: 400; letter-spacing: 0.05rem; text-transform: uppercase; }
.poets p { font-weight: 300; }