<main>
  <section class="dark">
    <div>
      <p>prefers-reduced-transparency: <b>no-preference</b></p>
      <p>prefers-color-scheme: <b>dark</b></p>
    </div>
    <figure>
      <picture>
        <img src="capsule_616x353.webp" alt="The Ramp game promotional image">
      </picture>
      <figcaption>
        <img src="capsule_616x353.webp" aria-hidden="true">
        <div class="adaptive-glass">
          <h3>THE RAMP is OUT NOW!</h3>
          <date>Tue, August 3, 2021 9:05 AM PDT</date>
        </section>
      </figcaption>
    </figure>
  </section>
  <section class="dark reduced-transparency">
    <div>
      <p>prefers-reduced-transparency: <b>reduce</b></p>
      <p>prefers-color-scheme: <b>dark</b></p>
    </div>
    <figure>
      <picture>
        <img src="capsule_616x353.webp" alt="The Ramp game promotional image">
      </picture>
      <figcaption>
        <img src="capsule_616x353.webp" aria-hidden="true">
        <div class="adaptive-glass">
          <h3>THE RAMP is OUT NOW!</h3>
          <date>Tue, August 3, 2021 9:05 AM PDT</date>
        </section>
      </figcaption>
    </figure>
  </section>
  
  <section class="light">
    <div>
      <p>prefers-reduced-transparency: <b>no-preference</b></p>
      <p>prefers-color-scheme: <b>light</b></p>
    </div>
    <figure>
      <picture>
        <img src="capsule_616x353.webp" alt="The Ramp game promotional image">
      </picture>
      <figcaption>
        <img src="capsule_616x353.webp" aria-hidden="true">
        <div class="adaptive-glass">
          <h3>THE RAMP is OUT NOW!</h3>
          <date>Tue, August 3, 2021 9:05 AM PDT</date>
        </section>
      </figcaption>
    </figure>
  </section>
  <section class="light reduced-transparency">
    <div>
      <p>prefers-reduced-transparency: <b>reduce</b></p>
      <p>prefers-color-scheme: <b>light</b></p>
    </div>
    <figure>
      <picture>
        <img src="capsule_616x353.webp" alt="The Ramp game promotional image">
      </picture>
      <figcaption>
        <img src="capsule_616x353.webp" aria-hidden="true">
        <div class="adaptive-glass">
          <h3>THE RAMP is OUT NOW!</h3>
          <date>Tue, August 3, 2021 9:05 AM PDT</date>
        </div>
      </figcaption>
    </figure>
  </section>
</main>

.adaptive-glass {
  --glass-lightness: 100%;
  --glass-alpha: 50%;
  
  background: hsl(0 0% var(--glass-lightness) / var(--glass-alpha));
  -webkit-backdrop-filter: blur(40px);
          backdrop-filter: blur(40px);
}
  
  .dark .adaptive-glass {
    --glass-lightness: 0%;
  }
  
  .reduced-transparency .adaptive-glass {
    --glass-alpha: 85%;
  }
  
  @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {.adaptive-glass {
    background: hsl(0 0% var(--glass-lightness) / 90%)
}
  }

figure {
  --on-glass-primary: hsl(220 50% 20%);
  --on-glass-secondary: hsl(220 40% 30%);
  
  max-inline-size: 60ch;
  border-radius: .5ch;
  overflow: hidden;
  
  /*  https://shadows.brumm.af/  */
  box-shadow:
    0 3px   2px  hsl(0 0% 0% / 2%),
    0 7px   5px  hsl(0 0% 0% / 3%),
    0 13px  10px hsl(0 0% 0% / 4%),
    0 22px  18px hsl(0 0% 0% / 5%),
    0 42px  33px hsl(0 0% 0% / 6%),
    0 100px 80px hsl(0 0% 0% / 7%)
  ;
}

.dark figure {
    --on-glass-primary: hsl(220 50% 90%);
    --on-glass-secondary: hsl(220 30% 75%);
  }

figure img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    -o-object-fit: cover;
       object-fit: cover;
  }

figcaption {
  display: grid;
  grid: [stack] 1fr / [stack] 1fr;
  position: relative;
}

figcaption > * {
    grid-area: stack;
  }

figcaption > img {
    position: absolute;
    inset: 0;
    /*   reflect hero image for a nice effect!   */
    transform: scaleY(-1);
  }

figcaption > .adaptive-glass {
    z-index: 1;
    padding-inline: 2ch;
    padding-block: 2ch 2.5ch;
    color: var(--on-glass-primary);
    display: grid;
    gap: 1ch;
  }

.dark figcaption > .adaptive-glass {
      text-shadow: 0 1px 0 hsl(0 0% 0% / 20%);
    }

figcaption h3 {
    font-size: clamp(1.25rem, calc(1rem + 2vw), 2.5rem);
  }

figcaption date {
    color: var(--on-glass-secondary);
  }

* {
  box-sizing: border-box;
  margin: 0;
}

html {
  block-size: 100%;
}

body {
  min-block-size: 100%;
  font-family: system-ui, sans-serif;
  display: grid;
  place-content: center;
}

main {
  display: grid;
  place-items: center;
}

@media (width >= 720px) {

main {
    grid-template-columns: 1fr 1fr
}
  }

section {
  display: grid;
  place-content: center;
  gap: 2ch;
  padding: 5vmin;
}

section p {
    text-align: center;
  }

section.light {
    color: #111;
  }

section.dark {
    background: #111;
    color: white;
  }