.dina-alert-banner {
   position: relative;
}

.dina-alert-banner--viktigt {
   background: var(--dina-alert-red);
   color: white;
}

.dina-alert-banner--underhall {
   background: var(--dina-alert-yellow);
}

.dina-alert-banner--information {
   background: var(--dina-alert-blue);
   color: var(--dina-alert-blue-text);
}

.dina-alert-banner__grid {
   display: flex;
   width: 100%;
   max-width: 1440px;
   padding: 1.5rem 2.5rem;
   justify-content: center;
   align-items: center;
   gap: 0.75rem;
   margin-left: auto;
   margin-right: auto;
}

.dina-alert-banner__close {
   position: absolute;
   top: 50%;
   right: 1rem;
   transform: translateY(-50%);
   appearance: none;
   border: none;
   background-color: transparent;
   width: 2rem;
   height: 2rem;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   font-size: 0;
}

.dina-alert-banner__close::before {
   content: "";
   display: block;
   flex: 0 0 auto;
   width: 1.5rem;
   height: 1.5rem;
   background-image: var(--dina-icon-url__dina-x-close);
   background-size: 1.5rem 1.5rem;

}

.dina-alert-banner__type {
   flex: 0 0 auto;
   display: flex;
   align-items: center;
   gap: 0.5rem;
   background-size: 0;
   font-weight: 600;
}

.dina-alert-banner__type::before {
   content: "";
   display: block;
   flex: 0 0 auto;
   width: 1.8rem;
   height: 1.8rem;
   background-image: var(--dina-icon-url__alert-important);
   background-size: 1.8rem 1.8rem;
}

.dina-alert-banner--information .dina-alert-banner__type::before {
   background-image: var(--dina-icon-url__alert-information);
}

.dina-alert-banner--viktigt .dina-alert-banner__type::before,
.dina-alert-banner--viktigt .dina-alert-banner__close::before {
   filter: var(--dina-filter--greyscale-white-100);
}

.dina-alert-banner--information .dina-alert-banner__type::before,
.dina-alert-banner--information .dina-alert-banner__close::before {
   filter: var(--dina-filter--alert-blue);

}

.dina-alert-banner .dina-alert-banner__text a{
   color: inherit;
   padding: .5em;
   position: relative;
}

.dina-alert-banner .dina-alert-banner__text a::after{
   content: "";
   background-color: currentColor;
   position: absolute;
   height: 2px;
   width: calc(100% - 0.8em);
   left: 0.4em;
   bottom: 0.4em;
}


@media all and (max-width: 600px) {
   .dina-alert-banner__grid {
      flex-wrap: wrap;
      align-items: flex-start;
      justify-content: flex-start;
   }

   .dina-alert-banner__close {
      top: 1.5rem;
      transform: none;
      margin-top: -0.25rem;
   }
}