fairmondo/fairmondo

.GrayBox {
  @include whitebox;
  @include clearfix;
  background: $lightest-gray;
  margin-bottom:1em;
  padding:0;
}

.GrayBox > .GrayBox-heading {
  padding: 0.625rem 1.25rem;
  font-size: 1.3rem;
  border-top-left-radius: 0.5em;
  border-top-right-radius: 0.5em;
  background-color: $even-lighter-gray;
  border-bottom: 1px solid $lighter-gray;
  position: relative;
  margin-bottom: 0.5em;
}

.GrayBox > .GrayBox-heading > .GrayBoy-heading-addition {
  font-size:0.75rem;
  padding-top: 1px;
  @include at-breakpoint($bp-tablet) {
    padding: 0.3125rem 1.25rem;
    position: absolute;
    bottom: 0;
    right: 0;
  }
}

.GrayBox > .GrayBox-content {
  padding: 0.625rem 1.25rem;
}

.GrayBox > .GrayBox-content > hr {
  color: $lighter-gray;
  background-color: $lighter-gray;
  border: 0;
  width: 100%;
  height: 1px;
  margin-bottom: 1em;
}