.notice-confirmed {

  &__wrapper {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding-bottom: $spacing--s;
    padding-top: $spacing--s;
  }

  &__media {
    @include center-all;
    width: grid-columns(2,6);

    img {
      flex-shrink: 0;
      max-height: 80px;
      max-width: 80%;
    }
  }

  &__content {
    display: flex;
    width: grid-columns(4,6);
  }

  &__text {
    width: grid-columns(3,4);

    p:last-child {
      margin-bottom: 0;
    }
  }

  &__close {
    margin-left: auto;
    text-align: right;
    width: grid-columns(1,4);

    button {
      position: relative;
      top: $spacing--xxs;
    }
  }

  &__text {
    &, p {
      @include font-style('title--xs','title--l');
    }
  }

  // specific background mappings
  &.bg-brand--yellow {
    color: $color-brand--four;
  }

  &.bg-brand--off-white .icon {
    color: $color--two-50;
  }
}

@include viewport--l {
  .notice-confirmed {
    &__wrapper {
      padding-bottom: $baseline * 4;
      padding-top: $baseline * 4;
    }

    &__media {
      width: grid-columns(2,12);

      img {
        max-height: 100px;
      }
    }

    &__content {
      width: grid-columns(10,12);
    }

    &__text {
      width: grid-columns(9,10);
    }

    &__close {
      width: grid-columns(1,10);

      button {
        top: $spacing--xs;
      }

      .icon {
        height: $icon-size--l;
        width: $icon-size--l;
      }
    }
  }
}
