/* h1 */
/* h2 */
/* h3 */
/* h4 */
/* h5 */
/* h6 */
.alert {
  --alert-background-color: #ededed;
  --alert-color: inherit;
  --alert-close-svg-fill: #151515;
  --alert-close-svg-fill-hover: #63666a;
  background: var(--alert-background-color);
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.15);
  color: var(--alert-color);
  position: relative;
  z-index: 4;
}
.menu-open .alert {
  z-index: 99;
}
.l-main .alert {
  margin-left: auto;
  margin-right: auto;
  max-width: calc(90rem - 200px);
  margin-bottom: 2.5rem;
  margin-top: 2.5rem;
}
.alert.alert--emergency {
  --alert-background-color: #bd472a;
  --alert-color: #fff;
  --alert-close-svg-fill: #fff;
  --alert-close-svg-fill-hover: #ededed;
}
.alert.alert--warning {
  --alert-background-color: #63666a;
  --alert-color: #fff;
  --alert-close-svg-fill: #fff;
  --alert-close-svg-fill-hover: #ededed;
}

.alert__container {
  margin-left: auto;
  margin-right: auto;
  max-width: 90rem;
  align-items: center;
  display: grid;
  grid-template: "icon . close" auto "title title title" auto "caption caption caption" auto "cta cta cta" auto/min-content 1fr 50px;
}
@media screen and (min-width: 992px) {
  .alert__container {
    grid-template: "icon title cta close" auto "icon caption cta close" auto/min-content 1fr auto 100px;
  }
  .alert__container.alert__container-multiple-buttons {
    grid-template: "icon title cta close" auto "icon caption cta close" auto/min-content 1fr 1fr 100px;
  }
}
.alert__container::before {
  background-color: #fff;
  display: block;
  height: 60px;
  position: absolute;
  top: 0;
  width: 100%;
}
@media screen and (max-width: 991px) {
  .alert__container::before {
    content: "";
  }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
  .alert__container::before {
    background-color: transparent;
    position: relative;
  }
}
@media screen and (max-width: 767px) {
  .alert__container::before {
    background-color: transparent;
    position: relative;
  }
}

.alert__icon {
  align-items: center;
  align-self: stretch;
  display: flex;
  grid-area: icon;
  justify-content: center;
  min-height: 60px;
  position: relative;
  width: 100px;
}
@media screen and (min-width: 992px) {
  .alert__icon {
    background-color: #fff;
  }
}
.alert__icon svg {
  height: auto;
  width: 40px;
}

.alert__title {
  font-family: "Zilla Slab", serif;
  font-size: 1.3125rem;
  font-weight: 600;
  grid-area: title;
  line-height: 25px;
  margin-left: 1.5625rem;
  margin-top: 20px;
}

.alert__caption {
  grid-area: caption;
  margin: 20px 1.5625rem;
}
@media screen and (min-width: 992px) {
  .alert__caption {
    margin-right: 0;
  }
}
.alert__title + .alert__caption {
  margin-top: 15px;
}

.alert__button {
  grid-area: cta;
  margin: 0 1.5625rem 20px;
}
@media screen and (min-width: 992px) {
  .alert__button {
    margin-left: 40px;
    margin-right: 40px;
  }
}
.alert__button .button {
  margin: 0 0 5px;
  display: inline-block;
}

.alert__close {
  background: none;
  border: 0;
  cursor: pointer;
  display: flex;
  grid-area: close;
  justify-self: end;
  margin-right: 30px;
  padding: 0;
  position: relative;
}
@media screen and (min-width: 992px) {
  .alert__close {
    align-self: start;
    margin-top: 20px;
  }
}
.alert__close:hover > svg {
  fill: var(--alert-close-svg-fill-hover);
}
.alert__close > svg {
  fill: var(--alert-close-svg-fill);
  transition: fill 300ms ease-in-out;
}

.alert--no-cookie .alert__container {
  grid-template: "icon title" auto "caption caption" auto "cta cta" auto/auto 1fr;
  padding-bottom: 30px;
  padding-top: 30px;
}
@media screen and (min-width: 992px) {
  .alert--no-cookie .alert__container {
    grid-template: "icon title cta" auto "caption caption cta" auto/auto 1fr auto;
    padding-left: 30px;
    padding-right: 30px;
  }
}
.alert--no-cookie .alert__container::before {
  content: normal;
}
.alert--no-cookie .alert__icon {
  background: none;
  display: inline-flex;
  grid-area: icon;
  min-height: auto;
  width: auto;
}
@media screen and (max-width: 991px) {
  .alert--no-cookie .alert__icon {
    margin-left: 30px;
  }
}
.alert--no-cookie .alert__icon svg {
  height: auto;
  width: 40px;
}
.alert--no-cookie .alert__title {
  margin-top: 0;
}
.alert__icon + .alert--no-cookie .alert__title {
  margin-left: 20px;
}
@media screen and (min-width: 992px) {
  .alert--no-cookie .alert__caption {
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
  }
}
.alert--no-cookie .alert__button {
  margin-bottom: 0;
  margin-right: 0;
}