.postcode-checker {
  padding: 16px;
  background-color: $white;
  border: 1px solid $gray;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
  "title"
  "field"
  "error"
  "action";
  gap: 8px 16px;

  &__title {
    grid-area: title;
    margin-bottom: 8px;
  }

  &__field {
    grid-area: field;
  }

  &__action {
    grid-area: action;
    margin-top: 8px;
  }

  &__input {
    display: block;
    width: 100%;
    outline: none;
  }

  &__error {
    grid-area: error;
    display: none;
    color: $red;
    margin-bottom: 0;
    line-height: 1rem;
    font-size: .75rem;
  }

  &--error {
    .postcode-checker__input {
      border-color: $red;
    }

    .postcode-checker__error {
      display: block;
    }
  }

  &__button {
    margin-top: 0;
  }

  &--mobile-only {
    display: grid;
  }

  &--desktop-only {
    display: none;
  }
}

@include media-breakpoint-up(sm) {
  .postcode-checker {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
    "title  title"
    "field  action"
    "error  error";

    &__action {
      margin-top: 0;
    }
  }
}

@include media-breakpoint-up(md) {
  .postcode-checker {
    grid-template-columns: 1fr;
    grid-template-areas:
    "title"
    "field"
    "error"
    "action";

    &__action {
      margin-top: 8px;
    }

    &--mobile-only {
      display: none;
    }

    &--desktop-only {
      display: grid;
    }
  }
}

@include media-breakpoint-up(xl) {
  .postcode-checker {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
    "title  title"
    "field  action"
    "error  error";

    &__action {
      margin-top: 0;
    }
  }
}