.alert__container { position: relative; }

.alert__content { font-weight: bold; padding: 20px 30px; width: 100%; }
.alert__content.has-link { padding: 0 30px; }
.alert__content.error { background: #de2003; color: #fefefe; }
.alert__content.info { background: #0d65fc; color: #fefefe; }
.alert__content.secondary { background: #eaeaea; color: #0a0a0a; }
.alert__content.success { background: #03f724; color: #0a0a0a; }
.alert__content.warning { background: #f7ef03; color: #0a0a0a; }
.alert__content *:last-child { margin-bottom: 0; }

.alert__content a { color: inherit; display: block; padding: 20px 0; }

.alert__content *:is(h1, h2, h3, h4, h5, h6) {
  font-size: 24px;
  font-weight: bold;
  line-height: normal;
  margin: 0 0 12px;
}

.alert__inner { align-items: center; display: flex; flex: 0 1 auto; justify-content: flex-start; }
.alert__inner > .alert__icon { font-size: 0; padding: 8px 16px 0; }
.alert__icon span:is(.fa, .fab, .fal, .far, .fas) { font-size: 32px; }

.alert__content * { color: inherit; }
.alert__content p { line-height: normal; margin: 0 0 12px; }

.alert__controls a {
  background: rgba(0,0,0,0.25);
  color: #fefefe;
  cursor: pointer;
  display: block;
  font-size: 30px;
  font-weight: bold;
  line-height: 1;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.alert__controls .tns-prev {
  left: 0;
  padding: 3px 12px 3px 6px;
}

.alert__controls .tns-next {
  padding: 3px 6px 3px 12px;
  right: 0;
}

@media screen and (max-width: 31.188em) {
  .alert__controls .tns-prev { left: 10px; }
  .alert__controls .tns-next { right: 10px; }

  .alert__content { font-size: 12px; padding: 12px 50px 14px; }
  .alert__icon { display: none; }
}