/* ==========================================================================
   RG Garden — About Page Specific Stylesheet
   Source of Truth: RG Garden.html Reference
   ========================================================================== */

/* Inner Pages Asymmetric Grid */
.two {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(20px, 3vw, 48px);
  row-gap: 36px;
  align-items: center;
}

.two .txt {
  display: flex;
  flex-direction: column;
  gap: 26px;
  align-items: flex-start;
}

.t-l { grid-column: 1 / 6; }
.i-r { grid-column: 7 / 13; }
.i-l { grid-column: 1 / 8; }
.t-r { grid-column: 9 / 13; }

/* 3-Column Highlights */
.cols3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 64px);
}

.cols3 > div {
  border-top: 1px solid var(--rule);
  padding-top: 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cols3 p {
  color: var(--ink-soft);
  font-size: .98rem;
}

/* Feature Images Pair */
.pair {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(14px, 2vw, 28px);
  margin-top: clamp(14px, 2vw, 28px);
  align-items: end;
}

/* About Responsive */
@media (max-width: 900px) {
  .t-l, .i-r, .i-l, .t-r {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  .cols3 {
    grid-template-columns: minmax(0, 1fr);
  }
  .pair {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* About Page Image Stacking */
.phero .arch {
  z-index: 3;
  pointer-events: none;
}