lila/ui/mod/css/_image-queue.scss

.image-queue {
  border-top: 4px solid $c-brag;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  padding: 2rem;

  img {
    max-width: 100%;
    max-height: 22vh;
    opacity: 0.7;
  }

  > div {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    padding: 0.8em;

    a {
      text-align: center;
    }

    &:hover {
      background-color: $c-bg-zebra;

      img {
        opacity: 1;
      }

      .image-queue--actions {
        opacity: 1;
      }
    }
  }

  &--flag {
    font-style: italic;
  }

  &--actions {
    @extend %flex-between;

    gap: 1em;
    opacity: 0.2;
    flex: 1;
    align-content: flex-end;

    button {
      padding: 0.5em 3em;
    }
  }
}