<div class="quick-info">
  <h3 class="title">Key Facts</h3>
  <slot></slot>
</div>

<style>
  .quick-info {
    position: relative;
    background: linear-gradient(
      to bottom right,
      var(--clr-box-gradient-start) 0%,
      var(--clr-box-gradient-end) 50%
    );

    box-shadow: 0.125em 0.125em 0.5em var(--clr-box-shadow);

    margin-block: 1em;
    border-radius: 1em;
    padding: 1em;

    z-index: 1;

    &::before {
      content: '';
      position: absolute;
      inset: var(--border-thin);
      background: linear-gradient(
        to bottom right,
        var(--clr-quick-info-bg-start) 0%,
        var(--clr-quick-info-bg-end) 50%
      );
      border-radius: inherit;
      z-index: -1;
    }

    & .title {
      margin-block: 0 1em;
    }

    & > :last-child {
      grid-template-columns: repeat(auto-fit, minmax(10em, 1fr));
    }
  }
</style>
