:root {
  --informational: #c2ec3f;
  --urgent: #f6d400;
  --critical: #b11602;
}

/* Alert Core Styling */
.alert-informational {
  background-color: var(--informational);
}

.alert-urgent {
  background-color: var(--urgent);
}

.alert-critical,
.alert-takeover {
  background-color: var(--critical);
}

.alert-banner {
  display: flex;
  width: 100%;
  height: auto;
  justify-content: center;
}

.alert-banner.alert-informational + .alert-banner.alert-informational,
.alert-banner.alert-urgent + .alert-banner.alert-urgent,
.alert-banner.alert-critical + .alert-banner.alert-critical,
.alert-banner.alert-takeover + .alert-banner.alert-takeover,
.alert-banner.alert-takeover + .alert-banner.alert-critical,
.alert-banner.alert-critical + .alert-banner.alert-takeover {
  border-top: 1px solid var(--white);
}

.alert-banner.alert-takeover {
  padding: 0;
}

.alert-content {
  display: flex;
  max-width: 540px;
  margin: 30px;
  flex-direction: column;
}

@media (min-width: 576px) {
  .alert-content {
    max-width: 720px;
    margin: 50px;
  }
}

@media (min-width: 768px) {
  .alert-content {
    max-width: 960px;
  }
}

@media (min-width: 992px) {
  .alert-content {
    flex-direction: row;
  }
}

@media (min-width: 1200px) {
  .alert-content {
    max-width: 1140px;
  }
}

.alert-icon {
  padding-right: 0;
  align-content: center;
  display: flex;
}

@media (min-width: 992px) {
  .alert-icon {
    padding-right: 50px;
  }
}

.alert-icon img {
  max-width: 350px;
}

.alert-informational .alert-icon,
.alert-urgent .alert-icon,
.alert-critical .alert-icon,
.alert-takeover .alert-icon {
  border-right: none;
}

@media (min-width: 992px) {
  .alert-informational .alert-icon,
  .alert-urgent .alert-icon {
    border-right: 3px solid var(--under-the-elms);
  }

  .alert-critical .alert-icon,
  .alert-takeover .alert-icon {
    border-right: 3px solid var(--white);
  }
}

.alert-info {
  margin-left: 0;
    padding: 0;
}

@media (min-width: 992px) {
  .alert-info {
    margin-left: 50px;
    flex-grow: 2;
    padding: 20px 0;
  }
}

/* Alert Type Styling */
.alert-banner h2 {
  font-size: 28px;
  padding-top: 10px;
}

@media (min-width: 992px) {
  .alert-banner h2 {
    font-size: 32px;
    padding: 0;
    margin-bottom: 0;
  }
}

.alert-banner .alert-body {
  padding: 0;
  background-color: transparent;
}

.alert-banner .alert-body p,
.alert-banner .alert-body a {
  font-size: 16px;
  margin-top: 5px;
}

@media (min-width: 768px) {
  .alert-banner .alert-body p,
  .alert-banner .alert-body a {
    font-size: 18px;
    font-family: var(--text-sans);
  }
}

.alert-body a {
  text-decoration: underline;
  font-weight: bold;
  outline: 2px solid transparent;
  outline-offset :2px;
  transition: .2s all ease;
}

.alert-body a.alert-more-info {
  display:inline-block;
}

.alert-body a:hover,
.alert-body a:focus {
  text-decoration:none;
}

.alert-body a:focus {
  outline: 2px solid currentColor;
}

.alert-body a:after {
  content: ' \f08e';
  font-family: "Font Awesome 6 Sharp", "Font Awesome 6 Brands";
  font-size: 16px;
  text-decoration: none;
  display: inline-block;
  margin-left: 4px;
}

.alert-informational h2,
.alert-informational p,
.alert-informational a,
.alert-urgent h2,
.alert-urgent p,
.alert-urgent a {
  color: var(--under-the-elms);
}

.alert-critical h2,
.alert-critical p,
.alert-critical a,
.alert-takeover h2,
.alert-takeover p,
.alert-takeover a {
  color: var(--white);
}