:root {
  
}

body {
  background: #111;
  color: #eee;
}

main {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: stretch;
  gap: 12px;

  .item {
    width: 20%;
    border: 1px solid #eee;

    > * { padding: 4px 8px; }
    > .name {
      display: block;
      background: #eee;
      color: #111;
      font-weight: bold;

      &[dot-color]::after {
        display: block;
        position: absolute;
        right: 8px;
        content: "";
        background: attr(dot-color);
        border-radius: 8px;
        width: 8px;
        height: 8px;
      }
    }
  }
}