.warning-banner {
  display: block;
  position: sticky;  
  top:0;
  left: 0;
  width: 100%;
  max-width: 100%;
  background: orange;
  color: #000;
  overflow: hidden;
  z-index: 9999;
}

.warning-banner .body {
  width: 100%;
  margin: 0 auto;
  padding: 1rem;
  display: grid;
  grid-template-columns: calc(100% - 16px) 16px;
}

.warning-banner .close {
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  color: black;
}

@media only screen and (min-width: 768px) {


   .warning-banner .body {
     width: 768px;
   }
 }

@media only screen and (min-width: 1024px) {


   .warning-banner .body {
     width: 1024px;
   }
 }