/* Tejori — guarantee band (home + collection) */


.grn {
  position: relative;
  overflow: hidden;
  background: #fff;
}

/* the about page runs the band on a slightly off-white ground */
.grn--alt {
  background: #fefefe;
}

.grn__box {
  position: relative;
  max-width: 89.583vw;
  margin-inline: auto;
}

.grn__box::after {
  content: "";
  position: absolute;
  right: -11.198vw;
  top: 2.083vw;
  width: 29.318vw;
  height: 22.025vw;
  background: url('../img/gra-hook-d.webp') no-repeat;
}

.grn__in {
  display: flex;
  justify-content: space-between;
  gap: 4.844vw;
  padding-block: 5.208vw;
}

.grn__l {
  max-width: 23.646vw;
}

/* only holds the logo image, but its font-size still sets the inline
   baseline gap under that image, so it is pinned rather than inherited */
.grn__logo {
  margin: 0;
  font-size: 2.4rem;
  line-height: 1;
}

.grn__logo img {
  display: inline;
}

.grn__sub {
  margin: 0;
  font-family: var(--ff-script);
  font-size: 4.447vw;
  font-style: italic;
  line-height: 2.865vw;
  color: var(--c-green);
}

.grn__quote {
  margin: 7.292vw 0 0;
  font-size: 1.667vw;
  font-weight: 700;
  line-height: 2.083vw;
  letter-spacing: 0;
  color: var(--c-mute);
}

.grn__by {
  display: block;
  font-family: var(--ff-script);
  font-size: 1.94vw;
  font-weight: 400;
  text-align: right;
  color: var(--c-ink);
}

.grn__r {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5.208vw;
  flex: 1;
}

.grn__ic {
  display: flex;
  align-items: center;
  min-height: 11.979vw;
}

/* each icon keeps its own size and only stops growing at the shared cap —
   a small one is never stretched up to match the others */
.grn__ic img {
  width: auto;
  height: auto;
  max-width: 11.979vw;
}

.grn__i h4 {
  margin: 1.302vw 0 .781vw;
  font-size: 1.667vw;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--c-txt);
}

.grn__i p {
  margin: 0;
  font-size: 1.042vw;
  line-height: 1.719vw;
  letter-spacing: 0;
  color: var(--c-txt);
}

.grn__i:last-child p {
  width: 20.625vw;
}

@media (max-width: 767px) {
  /* the about page runs the band on a slightly off-white ground */
.grn--alt {
  background: #fefefe;
}

.grn__box {
    max-width: 100%;
    padding-inline: 4.545vw;
  }

  .grn__box::after {
    right: -22.273vw;
    top: 3.409vw;
    width: 59.318vw;
    height: 44.545vw;
    background-image: url('../img/gra-hook-m.webp');
  }

  .grn__in {
    flex-direction: column;
    gap: 0;
    padding-block: 9.091vw;
    text-align: left;
  }

  .grn__l {
    max-width: 100%;
  }

  .grn__logo {
    font-size: 2rem;
  }

  .grn__logo img {
    width: 27.395vw;
  }

  .grn__sub {
    font-size: 14.545vw;
    line-height: 8.636vw;
  }

  .grn__quote {
    margin-top: 6.818vw;
    font-size: 4.545vw;
    line-height: 5.682vw;
  }

  .grn__by {
    margin-top: 4.091vw;
    font-size: 6.348vw;
    line-height: 6.136vw;
  }

  .grn__r {
    grid-template-columns: 1fr;
    gap: 6.818vw;
  }

  .grn__ic img {
    max-width: 11.591vw;
  }

  .grn__i h4 {
    margin: 2.727vw 0;
    font-size: 5.455vw;
  }

  .grn__i p,
  .grn__i:last-child p {
    width: 100%;
    font-size: 3.409vw;
    line-height: 5.114vw;
  }
}