/* =========================================================
   SASSY BELLE CANDLE CO., LLC
   ABOUT PAGE
========================================================= */


/* =========================================================
   ABOUT HERO
========================================================= */

.about-hero {

  min-height: 470px;

  padding: 90px 25px;

  display: flex;

  align-items: center;
  justify-content: center;

  text-align: center;

  background:

    radial-gradient(
      circle at 15% 25%,
      rgba(200, 189, 208, .55),
      transparent 30%
    ),

    radial-gradient(
      circle at 85% 75%,
      rgba(168, 181, 160, .55),
      transparent 32%
    ),

    var(--cream);
}


.about-hero-content {

  max-width: 820px;
}


.about-hero h1 {

  margin: 10px 0 20px;

  color: var(--brown);

  font-family: var(--serif);

  font-size:
    clamp(60px, 8vw, 100px);

  font-weight: 500;

  line-height: .88;
}


.about-hero h1 em {

  display: block;

  color: var(--sage-dark);

  font-family: var(--script);

  font-size:
    clamp(70px, 8vw, 110px);

  font-weight: 400;
}


.about-hero-content > p:last-child {

  max-width: 650px;

  margin: 20px auto;

  color: var(--brown-light);

  font-family: var(--serif);

  font-size: 20px;

  line-height: 1.5;
}


/* =========================================================
   INTRODUCTION
========================================================= */

.about-introduction {

  max-width: 1250px;

  margin: auto;

  padding:
    110px 6vw;

  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 80px;

  align-items: center;

  background: var(--ivory);
}


.about-image {

  position: relative;

  overflow: hidden;

  min-height: 570px;

  background: var(--sage-light);
}


.about-image::after {

  content: "";

  position: absolute;

  inset: 18px;

  border:
    1px solid
    rgba(252,249,243,.75);

  pointer-events: none;
}


.about-image img {

  width: 100%;

  height: 100%;

  min-height: 570px;

  object-fit: cover;

  display: block;
}


.about-copy {

  max-width: 570px;
}


.about-copy h2 {

  margin:
    8px 0 25px;

  color: var(--brown);

  font-family: var(--serif);

  font-size:
    clamp(48px, 5vw, 70px);

  font-weight: 500;

  line-height: .92;
}


.about-copy h2 em {

  color: var(--sage-dark);

  font-family: var(--script);

  font-size: 1.15em;

  font-weight: 400;
}


.about-copy p:not(.section-kicker) {

  margin-bottom: 18px;

  color: var(--brown-light);

  font-family: var(--serif);

  font-size: 18px;

  line-height: 1.55;
}


/* =========================================================
   APPROACH
========================================================= */

.about-approach {

  padding:
    110px 6vw;

  background: var(--cream);
}


.about-section-heading {

  max-width: 720px;

  margin:
    0 auto 55px;

  text-align: center;
}


.about-section-heading h2 {

  margin:
    8px 0 15px;

  color: var(--brown);

  font-family: var(--serif);

  font-size:
    clamp(48px, 5vw, 70px);

  font-weight: 500;

  line-height: .92;
}


.about-section-heading h2 em {

  color: var(--sage-dark);

  font-family: var(--script);

  font-size: 1.15em;

  font-weight: 400;
}


.about-section-heading > p:last-child {

  color: var(--brown-light);

  font-family: var(--serif);

  font-size: 19px;
}


.approach-grid {

  max-width: 1150px;

  margin: auto;

  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 25px;
}


.approach-card {

  padding:
    45px 32px;

  text-align: center;

  background: var(--ivory);

  border:
    1px solid
    rgba(118,91,74,.10);

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}


.approach-card:hover {

  transform: translateY(-5px);

  box-shadow:
    0 15px 35px
    rgba(80,60,45,.08);
}


.approach-number {

  margin-bottom: 18px;

  color: var(--mauve);

  font-family: var(--serif);

  font-size: 15px;

  letter-spacing: .2em;
}


.approach-card h3 {

  margin-bottom: 12px;

  color: var(--brown);

  font-family: var(--serif);

  font-size: 31px;

  font-weight: 500;
}


.approach-card p {

  color: var(--brown-light);

  font-family: var(--serif);

  font-size: 17px;

  line-height: 1.5;
}


/* =========================================================
   BLUEGRASS STORY
========================================================= */

.bluegrass-story {

  min-height: 550px;

  background:

    linear-gradient(
      rgba(93,70,56,.76),
      rgba(93,70,56,.76)
    ),

    url("assets/bluegrass.jpg")
    center / cover;

  background-attachment: fixed;
}


.bluegrass-overlay {

  min-height: 550px;

  padding:
    90px 25px;

  display: flex;

  align-items: center;
  justify-content: center;

  text-align: center;
}


.bluegrass-content {

  max-width: 780px;
}


.bluegrass-content .section-kicker {

  color: var(--lavender-light);
}


.bluegrass-content h2 {

  margin:
    10px 0 25px;

  color: var(--ivory);

  font-family: var(--serif);

  font-size:
    clamp(52px, 6vw, 80px);

  font-weight: 500;

  line-height: .9;
}


.bluegrass-content h2 em {

  display: block;

  color: var(--sage-light);

  font-family: var(--script);

  font-size: 1.15em;

  font-weight: 400;
}


.bluegrass-content p:not(.section-kicker) {

  max-width: 650px;

  margin:
    0 auto 18px;

  color:
    rgba(252,249,243,.90);

  font-family: var(--serif);

  font-size: 19px;

  line-height: 1.55;
}


/* =========================================================
   WOMEN OWNED
========================================================= */

.women-owned {

  padding:
    100px 25px;

  background: var(--ivory);

  text-align: center;
}


.women-content {

  max-width: 700px;

  margin: auto;
}


.women-icon {

  width: 58px;

  height: 58px;

  margin:
    0 auto 20px;

  display: flex;

  align-items: center;
  justify-content: center;

  border:
    1px solid var(--mauve);

  border-radius: 50%;

  color: var(--mauve);

  font-size: 20px;
}


.women-content h2 {

  margin:
    8px 0 18px;

  color: var(--brown);

  font-family: var(--serif);

  font-size:
    clamp(50px, 6vw, 72px);

  font-weight: 500;

  line-height: .9;
}


.women-content h2 em {

  color: var(--sage-dark);

  font-family: var(--script);

  font-weight: 400;
}


.women-content > p:last-child {

  color: var(--brown-light);

  font-family: var(--serif);

  font-size: 19px;

  line-height: 1.55;
}


/* =========================================================
   BRAND VALUES
========================================================= */

.brand-values {

  padding:
    110px 6vw;

  background: var(--lavender-light);
}


.values-grid {

  max-width: 1050px;

  margin: auto;

  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 20px;
}


.value-item {

  padding:
    35px 22px;

  text-align: center;

  background:
    rgba(252,249,243,.65);
}


.value-item > span {

  color: var(--mauve);

  font-size: 18px;
}


.value-item h3 {

  margin:
    12px 0 8px;

  color: var(--brown);

  font-family: var(--serif);

  font-size: 28px;

  font-weight: 500;
}


.value-item p {

  color: var(--brown-light);

  font-family: var(--serif);

  font-size: 15px;

  line-height: 1.45;
}


/* =========================================================
   CLOSING
========================================================= */

.about-closing {

  padding:
    110px 25px;

  text-align: center;

  background: var(--brown);
}


.about-closing > div {

  max-width: 750px;

  margin: auto;
}


.about-closing .section-kicker {

  color: var(--lavender-light);
}


.about-closing h2 {

  margin:
    10px 0 20px;

  color: var(--ivory);

  font-family: var(--serif);

  font-size:
    clamp(52px, 6vw, 78px);

  font-weight: 500;

  line-height: .9;
}


.about-closing h2 em {

  color: var(--sage-light);

  font-family: var(--script);

  font-weight: 400;
}


.about-closing p:not(.section-kicker) {

  max-width: 620px;

  margin:
    0 auto 30px;

  color:
    rgba(252,249,243,.85);

  font-family: var(--serif);

  font-size: 19px;

  line-height: 1.55;
}


.about-closing .outline-button {

  display: inline-block;

  padding:
    13px 28px;

  border:
    1px solid var(--ivory);

  color: var(--ivory);

  font-family: var(--serif);

  font-size: 16px;

  transition: .25s ease;
}


.about-closing .outline-button:hover {

  background: var(--ivory);

  color: var(--brown);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

  .about-introduction {

    grid-template-columns: 1fr;

    gap: 50px;
  }


  .about-copy {

    max-width: 700px;

    margin: auto;
  }


  .approach-grid {

    grid-template-columns:
      1fr;
  }


  .values-grid {

    grid-template-columns:
      repeat(2, 1fr);
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

  .about-hero {

    min-height: 390px;

    padding:
      65px 20px;
  }


  .about-hero h1 {

    font-size: 57px;
  }


  .about-hero h1 em {

    font-size: 72px;
  }


  .about-hero-content > p:last-child {

    font-size: 17px;
  }


  .about-introduction {

    padding:
      75px 20px;
  }


  .about-image {

    min-height: 390px;
  }


  .about-image img {

    min-height: 390px;
  }


  .about-copy h2 {

    font-size: 51px;
  }


  .about-copy p:not(.section-kicker) {

    font-size: 17px;
  }


  .about-approach {

    padding:
      75px 20px;
  }


  .bluegrass-story,
  .bluegrass-overlay {

    min-height: 470px;
  }


  .bluegrass-story {

    background-attachment:
      scroll;
  }


  .brand-values {

    padding:
      75px 20px;
  }


  .values-grid {

    grid-template-columns:
      1fr;
  }


  .about-closing {

    padding:
      80px 20px;
  }

}