.govuk-image-field {
  display: grid;
  grid-template-areas:
    "label preview"
    "hint preview"
    "error preview"
    "file preview"
    "supplemental supplemental";
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto auto 1fr auto;
  gap: 0 1rem;

  label {
    grid-area: label;
  }

  .govuk-hint {
    grid-area: hint;
  }

  .govuk-error-message {
    grid-area: error;
  }

  input {
    grid-area: file;
    align-self: start;

    &::file-selector-button {
      color: var(--color-dark);
      background: var(--color-tint);
      border: var(--stroke-input);
      border-radius: var(--input-radius);
    }
  }

  .preview-image {
    grid-area: preview;
    position: relative;
    display: grid;
    overflow: visible;
    align-self: start;
    align-items: center;
    justify-items: center;
    background-color: var(--color-tint);
    border: var(--stroke-input);
    border-radius: var(--input-radius);

    min-width: calc(8em + 2 * var(--stroke-input-width));
    aspect-ratio: 1;

    .image-thumbnail {
      max-width: 8em;
      max-height: 8em;
    }
  }

  .file-destroy {
    appearance: none;
    position: absolute;
    background-color: var(--color-tint);
    color: var(--color-dark);
    border-radius: var(--input-radius);
    border: var(--stroke-input);
    display: block;
    padding: 0;
    top: calc(-1 * var(--stroke-input-width));
    right: calc(-1 * var(--stroke-input-width));

    &::after {
      content: "×";
      display: block;
      position: relative;
      width: 21px;
      line-height: 21px;
      font-size: 21px;
      top: -1px;
    }
  }

  > div:last-child {
    grid-area: supplemental;

    > * + * {
      margin-top: var(--flow-space, var(--space-2xs));
    }
  }

  .preview-image[hidden] {
    display: block !important;

    .file-destroy {
      display: none;
    }
  }
}