div.gl.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

div.gl.item {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: thin solid var(--border);
  border-radius: 3px;
  transition: box-shadow var(--glow-duration);

  &:is(:hover, :active, :focus-visible) {
    box-shadow: 0 0 16px var(--glow);
  }

  .media {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
}

p.gl#bsky {
  & > a,
  svg {
    transition: color var(--glow-duration);
    color: var(--accent-hover);
    --glow: var(--accent-hover);
  }
  & > a:is(:hover, :active, :focus-visible) {
    color: var(--accent);
  }
}

@media (min-width: 768px) {
  div.gl.grid {
    gap: 1rem;
  }
}