/* ============================ 08 — THE HOUSE OF WISDOM ===================== */
.s8-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(44% 40% at 22% 24%, rgba(29, 111, 106, .13), transparent 70%),
    radial-gradient(50% 46% at 84% 76%, rgba(200, 161, 85, .15), transparent 72%);
  pointer-events: none;
}

.s8-arab {
  margin: 34px 0 0;
  padding: 24px 28px 22px;
  border-left: 2px solid var(--gold);
  background: linear-gradient(100deg, rgba(255, 253, 246, .7), rgba(255, 253, 246, .2));
}
.s8-arab p {
  margin: 0 0 14px;
  font-family: var(--arabic);
  font-size: 38px;
  line-height: 1.5;
  letter-spacing: normal;
  direction: rtl;
  text-align: right;
  color: var(--teal-deep);
}
.s8-arab span {
  display: block;
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.55;
  letter-spacing: .02em;
  color: rgba(34, 38, 43, .55);
}

.s8-fig {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 340px 300px;
  gap: 26px;
  align-content: start;
}
.s8-card { margin: 0; display: flex; flex-direction: column; }
.s8-img {
  position: relative;
  overflow: hidden;
  background: #12171a;
  box-shadow: 0 30px 60px -40px rgba(24, 16, 6, .7);
}
.s8-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.78) contrast(1.05) brightness(.92) sepia(.1);
}
.s8-img::after {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 44px rgba(16, 10, 4, .3);
}
.s8-card figcaption {
  margin-top: 12px;
  font-family: var(--sans);
  font-size: 11.5px;
  line-height: 1.5;
  color: rgba(34, 38, 43, .55);
  max-width: 320px;
}
.s8-card--a { grid-column: 1 / 3; }
.s8-card--a .s8-img { height: 340px; }
.s8-card--b .s8-img { height: 300px; }
.s8-card--c .s8-img { height: 300px; }