.mail-header {
  width: 100%;
  font-family: "Roboto", sans-serif;
  border-bottom: 1px solid $color-grey-200;
}

.mail-header-logo {
  width: 184px;
  padding-left: 24px;
}

.mail-logo {
  display: block;
  margin: 2px auto 12px;
  width: 124px;
}

.mail-header-content {
  padding-bottom: $space-6;
  vertical-align: top;
}

.mail-title {
  margin-top: $space-1;
  margin-bottom: 0;
  line-height: 1.4;
  font-size: 28px;
  font-weight: 700;
  color: $color-brand;
}

.mail-title-eyebrow {
  display: inline-block;
  font-size: 14px;
  color: $color-grey-500;
  margin-bottom: 0;
  margin-right: 3px;
  line-height: 1;
}

.mail-title-muted {
  display: inline-block;
  margin: 4px 0;
}

.mail-subtitle {
  display: inline-block;
  font-size: 16px;
  font-weight: 700;
  color: $color-grey-500;
  margin-bottom: 12px;
  margin-right: 6px;

  &.-margin\:sm {
    margin-bottom: 4px;
  }
}

.mail-subtitle-tagline {
  display: block;
  font-size: 12px;
  color: $color-grey-500;
  line-height: 1.2;
  margin: 6px 0;
}

.mail-subtitle-eyebrow {
  display: block;
  font-size: 12px;
  color: $color-grey-600;
  margin-bottom: 4px;
}

.mail-title-anchor {
  display: block;
  margin-top: $space-3;
  font-size: $font-sm;
  color: $color-blue-600;
  text-decoration: none;
}