/* .card {
  background-color: var(--color-bg);
  border-radius: var(--rounded-lg);
  border-width: var(--border);
  padding: var(--size-6);
  box-shadow: var(--shadow-sm);
} */
.card {
  background-color: white;
  border-radius: 6px;
  display: block;
  overflow: hidden;
  padding: 0.5em !important;
  position: relative;


  a,
  a:link,
  a:visited,
  a:hover,
  a:active { color: white; }

  > img {
    float: left;
    height: 48px;
    width: 48px;
    border-radius: 24px;
    margin-right: 10px;
  }

  h3 {
    color: white;
    font-weight: 600;
    margin: 0;
  }

  p.group-type {
    color: white;
    margin: 0;
  }

  p.updated {
    color: gray;
    font-style: italic;
    margin: 0;
  }

  &.card-small {
    margin-bottom: 0.5em;
    padding: 0.75em;
  }


  &.frosted {
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    background-color: rgba(255, 255, 255, .8);
    box-shadow: 0 1px 12px rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.3);

    @supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
      & {
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
        background-color: rgba(255,255,255,0.5);
      }
    }
  }
}