<div class="controls">
  <label>
    <input class="hide-error" type="checkbox">
    Hide errors
  </label>
  <label>
    <input class="hide-warning" type="checkbox">
    Hide warnings
  </label>
  <label>
    <input class="hide-success" type="checkbox">
    Hide success
  </label>
</div>
<div class="grid">
  <div class="card card-warning">
    <svg aria-hidden="true">
      <use xlink:href="#warning" />
    </svg>
    <span class="sr-only">Warning</span>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis sodales erat vel accumsan. Nam eget massa nec sem vulputate ullamcorper vel quis justo.</p>
  </div>
  <div class="card card-error">
    <svg aria-hidden="true">
      <use xlink:href="#error" />
    </svg>
    <span class="sr-only">Error</span>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis sodales erat vel accumsan. Nam eget massa nec sem vulputate ullamcorper vel quis justo.</p>
  </div>
  <div class="card card-success">
    <svg aria-hidden="true">
      <use xlink:href="#success" />
    </svg>
    <span class="sr-only">Success</span>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis sodales erat vel accumsan. Nam eget massa nec sem vulputate ullamcorper vel quis justo.</p>
  </div>
  <div class="card card-warning">
    <svg aria-hidden="true">
      <use xlink:href="#warning" />
    </svg>
    <span class="sr-only">Warning</span>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis sodales erat vel accumsan. Nam eget massa nec sem vulputate ullamcorper vel quis justo.</p>
  </div>
  <div class="card card-error">
    <svg aria-hidden="true">
      <use xlink:href="#error" />
    </svg>
    <span class="sr-only">Error</span>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis sodales erat vel accumsan. Nam eget massa nec sem vulputate ullamcorper vel quis justo.</p>
  </div>
  <div class="card card-success">
    <svg aria-hidden="true">
      <use xlink:href="#success" />
    </svg>
    <span class="sr-only">Success</span>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis sodales erat vel accumsan. Nam eget massa nec sem vulputate ullamcorper vel quis justo.</p>
  </div>
  <div class="card card-success">
    <svg aria-hidden="true">
      <use xlink:href="#success" />
    </svg>
    <span class="sr-only">Success</span>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis sodales erat vel accumsan. Nam eget massa nec sem vulputate ullamcorper vel quis justo.</p>
  </div>
  <div class="card card-success">
    <svg aria-hidden="true">
      <use xlink:href="#success" />
    </svg>
    <span class="sr-only">Success</span>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis sodales erat vel accumsan. Nam eget massa nec sem vulputate ullamcorper vel quis justo.</p>
  </div>
  <div class="card card-warning">
    <svg aria-hidden="true">
      <use xlink:href="#warning" />
    </svg>
    <span class="sr-only">Warning</span>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis sodales erat vel accumsan. Nam eget massa nec sem vulputate ullamcorper vel quis justo.</p>
  </div>
  <div class="card card-error">
    <svg aria-hidden="true">
      <use xlink:href="#error" />
    </svg>
    <span class="sr-only">Error</span>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis sodales erat vel accumsan. Nam eget massa nec sem vulputate ullamcorper vel quis justo.</p>
  </div>

  <div class="card card-warning">
    <svg aria-hidden="true">
      <use xlink:href="#warning" />
    </svg>
    <span class="sr-only">Warning</span>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis sodales erat vel accumsan. Nam eget massa nec sem vulputate ullamcorper vel quis justo.</p>
  </div>
  <div class="card card-error">
    <svg aria-hidden="true">
      <use xlink:href="#error" />
    </svg>
    <span class="sr-only">Error</span>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis sodales erat vel accumsan. Nam eget massa nec sem vulputate ullamcorper vel quis justo.</p>
  </div>
  <div class="card card-success">
    <svg aria-hidden="true">
      <use xlink:href="#success" />
    </svg>
    <span class="sr-only">success</span>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis sodales erat vel accumsan. Nam eget massa nec sem vulputate ullamcorper vel quis justo.</p>
  </div>

  <div class="card card-success">
    <svg aria-hidden="true">
      <use xlink:href="#success" />
    </svg>
    <span class="sr-only">Success</span>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis sodales erat vel accumsan. Nam eget massa nec sem vulputate ullamcorper vel quis justo.</p>
  </div>
  <div class="card card-warning">
    <svg aria-hidden="true">
      <use xlink:href="#warning" />
    </svg>
    <span class="sr-only">Warning</span>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis sodales erat vel accumsan. Nam eget massa nec sem vulputate ullamcorper vel quis justo.</p>
  </div>
  <div class="card card-error">
    <svg aria-hidden="true">
      <use xlink:href="#error" />
    </svg>
    <span class="sr-only">Error</span>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis sodales erat vel accumsan. Nam eget massa nec sem vulputate ullamcorper vel quis justo.</p>
  </div>
</div>
<svg width="0" height="0" class="hidden">
  <symbol viewBox="0 0 24 24" id="error" fill="none">
    <path stroke-linecap="round" stroke-linejoin="round" stroke="currentColor" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
  </symbol>
  <symbol fill="none" id="warning" viewBox="0 0 24 24" stroke-width="1.5">
    <path stroke-linecap="round" stroke-linejoin="round" stroke="currentColor" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
  </symbol>
  <symbol fill="none" id="success" viewBox="0 0 24 24" stroke-width="1.5">
    <path stroke-linecap="round" stroke-linejoin="round" stroke="currentColor" d="M9 12.75L11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 01-1.043 3.296 3.745 3.745 0 01-3.296 1.043A3.745 3.745 0 0112 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 01-3.296-1.043 3.745 3.745 0 01-1.043-3.296A3.745 3.745 0 013 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 011.043-3.296 3.746 3.746 0 013.296-1.043A3.746 3.746 0 0112 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 013.296 1.043 3.746 3.746 0 011.043 3.296A3.745 3.745 0 0121 12z" />
  </symbol>
</svg>

@import url("https://fonts.googleapis.com/css2?family=Martian+Mono&display=swap");
@layer reset, theme, layout, cards, demo;

@layer demo {
  .grid > * {
    transition: opacity 0.7s ease-out, display 0.7s ease-out;
    transition-behavior: allow-discrete;

    @starting-style {
      opacity: 0;
    }
  }

  :root:has(.hide-error:checked) .card-error {
    opacity: 0;
    display: none;
  }
  :root:has(.hide-warning:checked) .card-warning {
    opacity: 0;
    display: none;
  }
  :root:has(.hide-success:checked) .card-success {
    opacity: 0;
    display: none;
  }
}

@layer theme {
  :root {
    --layout-column-min: 400px;
    --layout-gap: 3vmax;
  }
}

@layer cards {
  .card {
    --_bg: var(--bg, grey);
    --_color: var(--color, black);
    display: flex;
    gap: 8px;
    color: var(--_color);
    background: var(--_bg);
    border-radius: 1.8rem;
    padding: 30px;
    box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
    & svg {
      flex: 0 0 30px;
      width: 1.9rem;
      height: 1.9rem;
    }
    & p {
      padding-top: 0.3rem;
    }
  }
  .card-error {
    --bg: indianred;
    --color: white;
  }
  .card-success {
    --bg: PaleGreen;
    --color: darkgreen;
  }
  .card-warning {
    --bg: LemonChiffon;
    --color: darkorange;
  }
}

@layer layout {
  .grid {
    --grid-min: var(--layout-column-min);
    --grid-gap: var(--layout-gap);
    display: grid;
    grid-template-columns: repeat(
      auto-fit,
      minmax(min(var(--grid-min), 100%), 1fr)
    );
    gap: var(--grid-gap);
  }
  .controls {
    margin-bottom: 30px;
  }
}

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  body {
    margin: 0;
    padding: 3vmax;
    font-family: "Martian Mono", monospace;
    color: white;
    min-height: 100vh;
    background-image: linear-gradient(
      153deg in oklch,
      oklch(79% 0.31 280) 0%,
      45%,
      oklch(46% 0.31 322) 131% 131%
    );
  }

  p {
    margin: 0 0 1rem 0;
    &:last-of-type {
      margin: 0;
    }
  }
  .sr-only:not(:focus):not(:active) {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }
}