lila/ui/bits/css/_titleRequest.scss

.title__images {
  display: grid;
  gap: $block-gap;
  grid-template-columns: repeat(auto-fill, minmax(25em, 1fr));
  margin-bottom: 2em;
}

.title-image-edit {
  @extend %flex-column, %box-neat;

  padding: 2em;
  gap: 2em;
  background: $c-bg-zebra;
  margin-bottom: 2em;

  h2 {
    align-self: flex-start;
    width: auto;
    text-align: center;
  }
}

.title__status {
  @extend %box-neat;

  padding: 0.3em 0.7em;
  background: $c-accent;
  color: white;
  font-size: 0.9rem;
  font-weight: bold;
  text-transform: uppercase;

  &--building {
    background: $c-bg-zebra;
    color: $c-font;
  }

  &--approved {
    background: $c-good;
  }

  &--rejected {
    background: $c-bad;
  }

  &--feedback {
    background: $c-primary;
  }

  &--imported {
    background: $c-fancy;
  }
}

.title__status-full {
  @extend %flex-center-nowrap, %box-neat;

  margin-bottom: 2em;
  padding: 2em 2em;
  background: $c-bg-zebra;
  font-size: 1.2em;

  .icon-flair {
    margin-inline: 0 2rem;
    height: 60px;
  }

  h2 {
    margin-bottom: 1rem;
  }
}

.title-mod .mod-zone {
  margin: 0;
}

.title-mod > .mz-section {
  max-height: 250px;
}

.title-mod__similar,
.title-mod__history,
.title-mod__data,
.title-mod__actions {
  margin-top: 4em;

  h2 {
    line-height: 3;
  }
}

.title-mod__actions {
  @extend %box-neat;

  background: $c-bg-zebra;
  padding: 2em;
}

.title-image {
  width: auto;
  max-width: 100%;
  margin: auto;
  cursor: pointer;
}

.title-image--fallback {
  padding: 3rem;
  text-align: center;
  font-size: 3em;
  cursor: pointer;
}

.form-actions.title__cancel {
  justify-content: flex-start;
}