$notice-background-color: $dune !default;
$notice-text-color: $light !default;

.c-notice {
  padding: $spacer;
  background: $notice-background-color;
  color: $notice-text-color;
}

.c-notice__img {
  width: 100%;
}

.c-notice__body {
  padding: $spacer 0;
}

.c-notice__title {
  @include great-primer;

  margin-bottom: ($spacer / 2);
}

.c-notice__footer {
  padding: $spacer 0;
  text-align: center;
}

@include md {
  .c-notice {
    display: flex;
    flex-wrap: wrap;
  }

  .c-notice__media {
    display: flex;
    max-width: 10rem;
    align-items: center;
    padding-right: $spacer;
  }

  .c-notice__body {
    flex: 1;
    padding: 0 $spacer;
  }

  .c-notice__footer {
    display: flex;
    align-items: center;
    padding: 0 $spacer;
  }
}