/* ============================================================
   UI Content List Component
   (Left Content + Right Image Layout)
   Used in FASTR page
   ============================================================ */

.ui-content-list {
  /* ----------------------------------------------------------
     Component Variables (Scoped)
     ---------------------------------------------------------- */
  --ui-content-gap-y: var(--sp11);
  --ui-content-padding: var(--sp16);
  --ui-content-border-color: var(--clr-gray-650);
  --ui-content-image-width: 700px;
  --ui-left-content-max-width: none;
}

/* ------------------------------------------------------------
   Row Layout
   ------------------------------------------------------------ */
.ui-content-list__row {
  display: grid;
  grid-template-columns: 1fr var(--ui-content-image-width);
  align-items: center;
  padding: var(--ui-content-gap-y) 0;
  border-top: 1px solid var(--ui-content-border-color);
}

/* Remove bottom padding for last item */
.ui-content-list__row:last-child {
  padding-bottom: 0;
}

.with-right-col {
  --ui-left-content-max-width: 505px;
}

.ui-content__left-inner {
  max-width: var(--ui-left-content-max-width);
  margin-left: auto;
  margin-right: auto;
}

/* ------------------------------------------------------------
   Left Content
   ------------------------------------------------------------ */
.ui-content__left {
  padding: 0 var(--ui-content-padding);
}

.ui-content__title {
  margin-bottom: var(--sp6);
  color: var(--section-title-clr);
  font-weight: var(--fw-semibold);
  line-height: 1.3333333;
}

/* ------------------------------------------------------------
   Right Image
   ------------------------------------------------------------ */
.ui-content__img-wrap {
  margin: 0;
}

.ui-content__img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ------------------------------------------------------------
   Modifier: No Right Column (No Image)
   ------------------------------------------------------------ */
.ui-content-list__row.no-right-col {
  grid-template-columns: 1fr;
}

.ui-content-list__row.no-right-col .ui-content__left {
  padding: 0;
}