/* Tejori — about page
   Note: both sections below use a 768px breakpoint (not the site's usual 767)
   because that is what the original rules were written against. */

/* ---------- intro: photo + about text ---------- */

.ab__in {
  display: flex;
  gap: 3.125vw;
}

/* both images here stay inline, so their box keeps the text line's full height */
.ab__img img {
  display: inline;
  width: 45.573vw;
}

.ab__sub {
  margin: 3.125vw 0 0;
  font-family: var(--ff-script);
  font-size: 2.659vw;
  font-weight: 400;
  line-height: 2.659vw;
  text-transform: capitalize;
  color: var(--c-green);
}

.ab__logo {
  margin-top: -.26vw;
}

.ab__logo img {
  display: inline;
  width: 100%;
  max-width: 14.583vw;
  border-radius: .521vw;
  object-fit: cover;
}

.ab__t {
  max-width: 46.042vw;
  margin-top: .26vw;
  font-size: 1.146vw;
  font-weight: 400;
  line-height: 1.719vw;
  letter-spacing: 0;
  color: #000;
}

/* ---------- join the movement ---------- */

.jm {
  display: flex;
  align-items: flex-end;
  gap: 3.958vw;
  /* the photo is pulled up so it overlaps the band above it */
  margin-top: -16.979vw;
}

.jm__img {
  width: 53.646vw;
  order: 2;
}

.jm__img img {
  width: 100%;
  height: auto;
}

.jm__c {
  flex: 1;
  margin-bottom: 1.979vw;
  padding-left: 5.208vw;
}

.jm__h {
  margin: 0;
  font-size: 2.083vw;
  font-weight: 700;
  line-height: 125%;
  letter-spacing: 0;
  color: #000;
}

.jm__h strong {
  color: var(--c-green);
}

.jm__d {
  margin: 2.083vw 0 2.604vw;
}

.jm__d p {
  margin: 0;
  font-size: 1.146vw;
  font-weight: 400;
  line-height: 1.719vw;
  letter-spacing: 0;
  color: #000;
}

.jm__d p + p {
  margin-top: 2.135vw;
}

.jm .btn {
  --btn-hover: var(--c-green);
  padding: .357vw .521vw;
}

.jm .btn__in {
  justify-content: center;
}

/* this button's icon keeps its own fixed size — it never scaled with the viewport */
.jm .btn__in svg {
  width: 44px;
  height: 29px;
}

@media (max-width: 768px) {
  .ab__in {
    flex-direction: column;
    gap: 0;
  }

  .ab__img img {
    width: 100%;
  }

  .ab__c {
    padding: 6.818vw 4.545vw 9.091vw;
  }

  .ab__sub {
    margin-top: 0;
    font-size: 8.701vw;
    line-height: 1;
  }

  .ab__logo {
    margin-top: -1.136vw;
  }

  .ab__logo img {
    max-width: 47.727vw;
  }

  .ab__t {
    max-width: 100%;
    margin-top: 2.273vw;
    font-size: 3.409vw;
    line-height: 5.114vw;
  }

  .jm {
    flex-direction: column;
    gap: 0;
    margin-top: 0;
  }

  .jm__img {
    width: 100%;
    order: 0;
  }

  .jm__c {
    margin-bottom: 0;
    padding: 9.091vw 4.545vw;
  }

  .jm__h {
    font-size: 5.455vw;
    line-height: 6.818vw;
  }

  .jm__d {
    margin: 9.091vw 0;
  }

  .jm__d p {
    font-size: 3.409vw;
    line-height: 5.114vw;
  }

  .jm__d p + p {
    margin-top: 9.091vw;
  }

  /* this button carries its own small-screen sizes, and it switches one pixel
     later than the shared .btn rule does */
  .jm .btn {
    max-width: 100%;
    padding: 1.591vw 3.409vw;
    font-size: 4.545vw;
    letter-spacing: .227vw;
  }

  .jm .btn__in {
    gap: 5vw;
  }
}