.notification-banner {
    display: grid;
    background-color: #a4daf6;
}
.notification-banner.desktop {
    grid-template-columns: 80px 1fr 80px;
    padding: 0 calc(max((100% - 1200px)/2, 20px));
}
.notification-banner.mobile {
    grid-template-columns: 20px 1fr 20px;
    padding: 0 5px;
}
.notification-banner .notifications {
    grid-column-start: 2;
}
.notification-banner .notifications {
    overflow-x: scroll;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
}
.notification-banner .notifications::-webkit-scrollbar {
    display: none;
}
.notification-banner .previous, .notification-banner .next {
    background: none;
    background-size: 25px 25px;
    background-position: center;
    background-repeat: no-repeat;
    border: none;
}
.notification-banner.desktop .previous, .notification-banner.desktop .next {
    cursor: pointer;
}
.notification-banner.mobile .previous, .notification-banner.mobile .next {
    background-size: 20px 20px;
    opacity: 60%;
}
.notification-banner .previous {    
    background-image: url('data:image/svg+xml,<svg viewBox="0 0 448 448" width="448" height="448" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" version="1.1"><path fill="%23000" d="m 111.02193,240.83075 194.344,194.343 c 9.373,9.373 24.569,9.373 33.941,0 l 22.667,-22.667 c 9.357,-9.357 9.375,-24.522 0.04,-33.901 l -154.021,-154.746 154.021,-154.745004 c 9.335,-9.378998 9.317,-24.543998 -0.04,-33.900998 l -22.667,-22.667 c -9.373,-9.3730003 -24.569,-9.3730003 -33.941,0 l -194.344,194.342002 c -9.372,9.373 -9.372,24.569 0,33.942 z"/></svg>');
}
.notification-banner .next {
    background-image: url('data:image/svg+xml,<svg viewBox="0 0 448 448" width="448" height="448" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" version="1.1"><path fill="%23000" d="m 361.97445,240.83075 -194.344,194.343 c -9.373,9.373 -24.569,9.373 -33.941,0 l -22.667,-22.667 c -9.357,-9.357 -9.375,-24.522 -0.04,-33.901 l 154.021,-154.746 -154.021,-154.745004 c -9.335,-9.378998 -9.317,-24.543998 0.04,-33.900998 l 22.667,-22.667 c 9.373,-9.3730003 24.569,-9.3730003 33.941,0 l 194.344,194.342002 c 9.372,9.373 9.372,24.569 0,33.942 z"/></svg>');
}
.notification-banner .notifications {
    display: flex;
}
.banner-notification {
    scroll-snap-align: start;
    min-width: 100%;
    z-index: 10;
    overflow: hidden;
    display: grid;
    grid-template-rows: 10px 1fr 10px;
    grid-template-columns: 80px 35px 1fr max-content 35px;
    grid-template-areas:
        'image . . . .'
        'image . content call-to-action dismiss'
        'image . . . .';
    align-items: center;
    min-height: 65px;
}
.banner-notification > img {
    max-height: 65px;
    max-width: 100%;
    grid-area: image;
    place-self: center;
}
.banner-notification > .content {
    grid-area: content;
    margin-right: 35px;
}
.banner-notification > .content > :first-child {
  margin-top: 0;
}
.banner-notification > .content > :last-child {
  margin-bottom: 0;
}
.banner-notification > .content :is(h1, h2, h3, h4, h5, h6) {
  margin-bottom: 0.5rem;
}
.banner-notification > .content, .banner-notification > .content p {
    font-weight: 600;
}
.banner-notification > .content strong {
    font-weight: 700;
}
.banner-notification > .call-to-action {
    grid-area: call-to-action;
    margin-right: 35px;
    margin-bottom: 0;
    width: fit-content;
}
.banner-notification > .dismiss {
    grid-area: dismiss;
    background: none;
    background-image: url('data:image/svg+xml,<svg width="27px" height="29px" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="%23000" d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"/></svg>');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 35px;
    height: 35px;
    border: none;
    cursor: pointer;
}
@media screen and (max-width: 768px) {
    .banner-notification {
        padding: 10px 20px;
        display: grid;
        grid-template-rows: 1fr max-content;
        grid-template-columns: 1fr 35px;
        grid-template-areas:
            'content dismiss'
            'call-to-action dismiss';
    }
    .banner-notification > .content {
        margin-right: 0;
    }
    .banner-notification > .call-to-action {
        margin-right: 0;
        margin-top: 10px;
    }
}

@media screen and (max-width: 768px) {
    .popup-notification {
        display: none;
    }
}
.popup-notification > .overlay {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(15px);
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 10;
}
.popup-notification > dialog {
    z-index: 10;
    border: none;
    position: fixed;
    top: calc(215px + (100vh - 215px)*0.5);
    transform: translateY(-50%);
    width: 500px;
    max-height: calc((100vh - 215px)*0.8);
    max-width: calc(100vw - 40px);
    padding: 0;
    background: none;
    display: flex;
    flex-direction: column;
}
.popup-notification.no-notification-banner > dialog {
    top: calc(140px + (100vh - 140px)*0.5);
    max-height: calc((100vh - 140px)*0.8);
}
.popup-notification > dialog > .scrollable {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    border-radius: 15px 15px 0 0;
}
.popup-notification > dialog > .scrollable > img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}
.popup-notification > dialog > .scrollable > .content {
    background: #fff;
    padding: 30px 30px 0 30px;
}
.popup-notification > dialog > .controls {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 35px;
    background-color: #fff;
    padding: 0 30px 30px 30px;
    border-radius: 0 0 15px 15px;
}
.popup-notification > dialog > .controls > .call-to-action {
    width: fit-content;
    margin-bottom: 0;
}
.popup-notification > dialog > .controls > .dismiss {
    width: fit-content;
    margin-bottom: 0;
}
.popup-notification .left, .banner-notification .left {
    text-align: left;
}
.popup-notification .center, .banner-notification .center {
    text-align: center;
}
.popup-notification .right, .banner-notification .right {
    text-align: right;
}
.popup-notification .justify, .banner-notification .justify {
    text-align: justify;
}