.metoffice-warnings {
  box-sizing: border-box;
  width: 100%;
  margin: 0 0 18px;
  padding: 15px 18px;
  border: 1px solid #b8c7d1;
  border-radius: 10px;
  background: #f3f7f9;
  color: #172b36;
}

.metoffice-warning-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

#main-copy .metoffice-warnings h2 {
  margin: 0;
  font-size: 1.25rem;
}

.metoffice-warning-region {
  font-size: .85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.metoffice-warning-clear {
  margin: 7px 0 0;
  font-weight: 600;
  color: #26613a;
}

.metoffice-warning-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.metoffice-warning-item {
  padding: 12px 14px;
  border-left: 9px solid #f5d000;
  border-radius: 6px;
  background: #fff7bd;
}

.metoffice-warning-item.severity-amber { border-left-color: #f28c00; background: #fff0d5; }
.metoffice-warning-item.severity-red { border-left-color: #c62828; background: #ffe2e2; }
.metoffice-warning-level { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.metoffice-warning-type { margin-top: 2px; font-size: .82rem; font-weight: 700; }
#main-copy .metoffice-warning-item h3 { margin: 3px 0 6px; font-size: 1.05rem; }
.metoffice-warning-item p { margin: 0 0 7px; line-height: 1.4; }
.metoffice-warning-credit { margin: 10px 0 0; font-size: .75rem; color: #52646e; }

@media (max-width: 600px) {
  .metoffice-warnings { padding: 13px 14px; }
  .metoffice-warning-heading { align-items: flex-start; flex-direction: column; gap: 2px; }
}