webawesome/docs/docs/themes/showcase.css

html {
  background: transparent;
}

html,
body,
.theme-showcase {
  height: 100vh;
  overflow: hidden;
}

html.remixed {
  .remix-link {
    display: none;
  }
}

html:not(.remixed) {
  #mix_and_match {
    display: none;
  }
}

#mix_and_match {
  font-weight: var(--wa-font-weight-semibold);
  color: var(--wa-color-text-quiet);

  wa-icon {
    vertical-align: middle;
  }
}

.theme-showcase {
  isolation: isolate;
  background-color: var(--wa-color-surface-lowered);
  border-radius: var(--wa-border-radius-l);
  padding: var(--wa-space-xl);
  box-sizing: border-box;
  overflow: hidden;

  @media (width < 500px) {
    flex-flow: column;
  }

  header {
    min-width: min(25ch, 100vw);
    align-self: center;

    h1 {
      margin-bottom: var(--wa-space-2xs);
    }

    wa-breadcrumb-item:not(:first-of-type, :last-of-type) {
      display: none;
    }

    p:empty {
      display: none;
    }
  }
}

.showcase-examples-wrapper {
  inline-size: 100%;
  block-size: 100%;
}

.showcase-examples {
  column-gap: var(--wa-space-xl);

  & wa-card {
    display: inline-block;
    width: 100%;

    &:has(+ wa-card) {
      margin-block-end: var(--wa-space-xl);
    }
  }

  @supports not (zoom: 1) {
    column-count: 1;

    @media (width > 750px) {
      column-count: 2;
    }

    @media (width > 950px) {
      column-count: 3;
    }
  }

  @supports (zoom: 1) {
    column-count: 1;
    zoom: 40%;

    @media (width > 350px) {
      column-count: 2;
    }

    @media (width > 450px) {
      zoom: 55%;
    }

    @media (width > 750px) {
      zoom: 70%;
    }

    @media (width > 950px) {
      column-count: 3;
    }
  }
}