.today-duty {
  position: absolute;
  z-index: 2;
  left: max(48px, calc((100% - 1184px) / 2));
  bottom: 96px;
  width: min(400px, 35%);
  color: #fff;
  text-shadow: 0 1px 5px #000, 0 2px 18px #0009;
  letter-spacing: 0;
}
.today-duty[hidden] { display: none; }
.today-duty-heading { display: flex; align-items: baseline; gap: 12px; margin: 0 0 8px; font-size: 12px; font-weight: 500; line-height: 1.5; }
.today-duty-heading time { font-size: 11px; opacity: .8; }
.today-duty-names { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 18px; font-weight: 500; line-height: 1.6; }
.today-duty-names span { overflow-wrap: anywhere; max-width: 100%; }
@media (max-width: 1200px) {
  .today-duty { bottom: 158px; width: calc(100% - 96px); }
}
@media (max-width: 600px) {
  .today-duty { left: 20px; bottom: 136px; width: calc(100% - 40px); }
  .today-duty-heading { margin-bottom: 4px; font-size: 11px; }
  .today-duty-names { font-size: 15px; gap: 4px 16px; }
}
@media (max-width: 360px) {
  .today-duty-names { font-size: 14px; column-gap: 12px; }
}