.ff {
  margin-left: auto;
  margin-right: auto;
  max-width: 720px;
  text-align: center;
}

.ff-text {
  font: 12px/18px "GalanoGrotesque-Regular", sans-serif;
  letter-spacing: 0.005em;
  margin-left: auto;
  margin-right: auto;
}

.ff-button {
  background-color: #000;
  box-sizing: border-box;
  color: #fff !important;
  display: block;
  font: 14px/19px "GalanoGrotesque-SemiBold", sans-serif;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  padding: 12px;
  text-decoration: none;
  text-transform: uppercase;
  transition: all 150ms ease-in-out;
  width: 300px;
}

.ff-button:hover {
  background-color: #222730;
}

.ff-image {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
}

@media (min-width: 768px) {
  .ff {
    max-width: 1366px;
  }

  .ff-text {
    font-size: 16px;
    line-height: 22px;
  }

  .ff-button {
    width: 260px;
  }
}

/* Hero */

.ff-hero {
  background: url("/repo/JDW/desktop/pages/freeFormat/AW23/Aro/Week42/02-images/hero-bg-v1-sm.jpg") center center/cover #222730;
}

.ff-hero-content {
  padding: 15px;
}

.ff-hero-image {
  margin-bottom: 11px;
  width: 103px;
}

.ff-hero-heading {
  color: #fff;
  font: 24px/30px "GalanoGrotesque-SemiBold", sans-serif;
  margin-bottom: 12px;
  margin-left: auto;
  margin-right: auto;
  max-width: 232px;
}

.ff-hero-text {
  color: #fff;
  margin-bottom: 20px;
  max-width: 280px;
}

.ff-hero-button {
  background-color: #fff;
  color: #000 !important;
  margin-bottom: 4px;
}

.ff-hero-button:hover {
  background-color: #000;
  color: #fff !important;
}

.ff-hero-link-text {
  color: #fff;
  font-size: 10px;
  letter-spacing: normal;
  line-height: 14.4px;
  margin-bottom: 30px;
}

.ff-hero-disclaimer-text {
  color: #fff;
  letter-spacing: normal;
  line-height: 16px;
  margin-bottom: 2px;
}

@media (min-width: 768px) {
  .ff-hero {
    background-image: url("/repo/JDW/desktop/pages/freeFormat/AW23/Aro/Week42/02-images/hero-bg-v1-lg.jpg");
  }

  .ff-hero-content {
    padding: 20px;
  }

  .ff-hero-image {
    margin-bottom: 5px;
    width: 143px;
  }

  .ff-hero-heading {
    font-size: 40px;
    line-height: 35px;
    margin-bottom: 25px;
    max-width: none;
  }

  .ff-hero-text {
    margin-bottom: 25px;
    max-width: 551px;
  }

  .ff-hero-button {
    margin-bottom: 8px;
  }

  .ff-hero-link-text {
    font-size: 10px;
    letter-spacing: normal;
    line-height: 14.4px;
    margin-bottom: 14px;
  }

  .ff-hero-disclaimer-text {
    font-size: 12px;
    letter-spacing: normal;
    line-height: 16px;
    margin-bottom: 5px;
    max-width: 783px;
  }
}

/* Section 1 */

.ff-s1-content {
  padding: 30px 15px;
}

.ff-s1-heading {
  font: 22px/24px "GalanoGrotesque-SemiBold", sans-serif;
  letter-spacing: 0.005em;
  margin-bottom: 15px;
  margin-left: auto;
  margin-right: auto;
  max-width: 192px;
}

.ff-s1-text {
  margin-bottom: 15px;
  max-width: 280px;
}

.ff-s1-button {
  margin-bottom: 10px;
}

.ff-s1-link-text {
  font-size: 10px;
  line-height: 14.4px;
  margin-bottom: 15px;
}

.ff-s1-apr-text {
  font: 22px/24px "GalanoGrotesque-SemiBold", sans-serif;
  margin-bottom: 10px;
}

.ff-s1-example-text {
  font: 12px/18px "GalanoGrotesque-SemiBold", sans-serif;
  letter-spacing: 0.005em;
  margin-bottom: 10px;
  max-width: 260px;
}

@media (min-width: 768px) {
  .ff-s1-heading {
    font-size: 40px;
    letter-spacing: normal;
    line-height: 55px;
    max-width: none;
  }
  
  .ff-s1-text {
    max-width: 650px;
  }
  
  .ff-s1-apr-text {
    font-size: 28px;
    line-height: normal;
    margin-bottom: 15px;
  }
  
  .ff-s1-example-text {
    font-size: 16px;
    line-height: 24px;
    max-width: 803px;
  }
}

/* Section 2 */

.ff-s2 {
  background-color: #222730;
}

.ff-s2-content {
  padding: 25px 15px 20px;
}

.ff-s2-heading {
  color: #fff;
  font: 22px/24px "GalanoGrotesque-SemiBold", sans-serif;
  letter-spacing: 0.005em;
  margin-bottom: 15px;
  margin-left: auto;
  margin-right: auto;
  max-width: 298px;
}

.ff-s2-text {
  color: #fff;
  margin-bottom: 17px;
  max-width: 270px;
}

.ff-s2-text-br {
  display: none;
}

.ff-s2-list-text {
  color: #fff;
  font: 16px/24px "GalanoGrotesque-SemiBold", sans-serif;
  margin-bottom: 15px;
}

.ff-s2-button {
  background-color: #fff;
  color: #000 !important;
  margin-bottom: 10px;
}

.ff-s2-button:hover {
  background-color: #000;
  color: #fff !important;
}

.ff-s2-link-text {
  color: #fff;
  font-size: 10px;
  line-height: 14.4px;
}

@media (min-width: 768px) {
  .ff-s2-content {
    padding-bottom: 45px;
    padding-top: 45px;
  }

  .ff-s2-heading {
    font-size: 40px;
    letter-spacing: normal;
    line-height: 55px;
    margin-bottom: 10px;
    max-width: none;
  }
  
  .ff-s2-text {
    margin-bottom: 25px;
    max-width: none;
  }

  .ff-s2-text-br {
    display: inline;
  }
  
  .ff-s2-list-text {
    font-size: 22px;
    letter-spacing: normal;
    line-height: normal;
    margin-bottom: 10px;
  }

  .ff-s2-list-text-br {
    display: none;
  }
  
  .ff-s2-button {
    margin-top: 25px;
  }
}

/* Section 3 */

.ff-s3-content {
  padding: 30px 15px;
}

.ff-s3-image {
  margin-bottom: 15px;
  width: 78px;
}

.ff-s3-heading {
  font: 22px/24px "GalanoGrotesque-SemiBold", sans-serif;
  letter-spacing: 0.005em;
  margin-bottom: 20px;
}

.ff-s3-block {
  margin-bottom: 20px;
  margin: 0 20px 20px;
}

.ff-s3-block-heading {
  font: 22px/24px "GalanoGrotesque-SemiBold", sans-serif;
  letter-spacing: 0.005em;
}

.ff-s3-text {
  margin-bottom: 15px;
}

.ff-s3-block:nth-of-type(1) .ff-s3-text,
.ff-s3-block:nth-of-type(2) .ff-s3-text {
  max-width: 240px;
}

.ff-s3-button {
  margin-bottom: 10px;
}

.ff-s3-link-text {
  font-size: 10px;
  line-height: 14.4px;
  margin-bottom: 15px;
}

.ff-s3-br {
  display: none;
}

@media (min-width: 768px) {
  .ff-s3-heading {
    font-size: 40px;
    letter-spacing: normal;
    line-height: 55px;
  }

  .ff-s3-blocks {
    display: flex;
    justify-content: center;
  }

  .ff-s3-block-heading {
    letter-spacing: normal;
    line-height: 26px;
    margin-bottom: 5px;
  }
  
  .ff-s3-text {
    max-width: 650px;
  }

  .ff-s3-block:nth-of-type(1) .ff-s3-text {
    max-width: 256px;
  }

  .ff-s3-block:nth-of-type(2) .ff-s3-text {
    max-width: 308px;
  }

  .ff-s3-block:nth-of-type(3) .ff-s3-text {
    max-width: 210px;
  }

  

  .ff-s3-br {
    display: inline;
  }
}