<section class="no-preference">
  <p>prefers-reduced-transparency: <b>no-preference</b></p>
  <div class="card">
    <h2>Lorem ipsum</h2>
    <p>Dolor sit amet consectetur adipisicing elit. Iste voluptate esse incidunt dolorum error assumenda. Consequatur, nesciunt! Vitae, fugiat nobis? Labore magni, excepturi porro accusamus dolores sint quam. Tempora!</p>
    <br>
    <button>Incipias</button>
  </div>
</section>

<section class="reduced">
  <p>prefers-reduced-transparency: <b>reduce</b></p>
  <div class="card">
    <h2>Lorem ipsum</h2>
    <p>Dolor sit amet consectetur adipisicing elit. Iste voluptate esse incidunt dolorum error assumenda. Consequatur, nesciunt! Vitae, fugiat nobis? Labore magni, excepturi porro accusamus dolores sint quam. Tempora!</p>
    <br>
    <button>Incipias</button>
  </div>
</section>

@layer demo {
  .card {
    color: white;
    backdrop-filter: blur(5px);
    background: hsl(none none 100% / 20%);
    border: 1px solid hsl(none none 100% / 20%);
    
    .reduced & {
      background: hsl(none none 0% / 80%);
      border-color: hsl(none none 0% / 60%);
    }
  }
}

@layer demo.support {
  * {
    box-sizing: border-box;
    margin: 0;
  }

  html {
    block-size: 100%;
    color-scheme: dark light;
  }

  body {
    min-block-size: 100%;
    font-family: system-ui, sans-serif;
    
    /* bg image src https://unsplash.com/photos/purple-and-white-heart-illustration-nY14Fs8pxT8 */
    background-image: url("milad-fakurian-nY14Fs8pxT8-unsplash.webp");
    background-size: cover;
    background-position: center;

    display: grid;
    gap: 5vmin;
    padding: 5vmin;
    grid-template-columns: 1fr 1fr;
    place-content: center;
    place-items: center end;
    
    & > section:nth-child(2) {
      place-self: center start;
    }
    
    @media (width <= 1000px) {
      grid-template-columns: unset;
      grid-auto-flow: rows;
      gap: 10vmin;
    }
  }
  
  section {
    display: grid;
    gap: 5vmin;
    
    > p {
      color: white;
      text-align: center;
    }
  }
  
  p {
    line-height: 1.5;
    text-wrap: pretty;
  }
  
  img {
    max-width: 100%;
  }
  
  .card {
    max-inline-size: 50ch;
    display: grid;
    justify-items: start;
    gap: 1ch;
    padding-block: 2.5ch;
    padding-inline: 3ch;
    border-radius: 20px;
    
    & > h2 {
      font-size: 3rem;
    }
    
    & > p {
      color: #eee;
    }
  }
  
  button {
    background: deeppink;
    border: none;
    border-radius: 5ch;
    padding: 1ch 2.5ch;
    color: white;
    font-size: 1.25rem;
  }
}