.world-clock-banner {
  position: relative;
  z-index: 4;
  padding: 12px clamp(12px, 3vw, 44px) 14px;
  color: #fff;
  background: #13091a;
  border-bottom: 3px solid #e9ff42;
}
.world-clock-banner > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
  font:
    800 0.65rem/1.2 "DM Mono",
    monospace;
  letter-spacing: 0.12em;
}
.world-clock-banner p {
  margin: 0;
  color: #ff2aa3;
}
.world-clock-banner header span {
  color: #e9ff42;
  text-align: right;
}
.world-clock-array {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border: 2px solid #ff2aa3;
  box-shadow: 5px 5px 0 #e9ff42;
}
.world-clock {
  min-width: 0;
  padding: 10px clamp(7px, 1.4vw, 18px);
  border-right: 1px solid #72536e;
  background: linear-gradient(
    145deg,
    rgba(255, 42, 163, 0.14),
    transparent 65%
  );
}
.world-clock:last-child {
  border-right: 0;
}
.world-clock strong,
.world-clock time,
.world-clock small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.world-clock strong {
  color: #ff83c5;
  font-size: clamp(0.56rem, 1vw, 0.72rem);
  letter-spacing: 0.08em;
}
.world-clock time {
  margin: 2px 0;
  color: #fff;
  font:
    400 clamp(1.12rem, 2.3vw, 2rem) / 1 "Archivo Black",
    sans-serif;
}
.world-clock small {
  color: #d7c9dd;
  font-size: 0.58rem;
  letter-spacing: 0.04em;
}
@media (max-width: 720px) {
  .world-clock-banner > header {
    align-items: flex-start;
  }
  .world-clock-array {
    grid-template-columns: repeat(5, minmax(104px, 1fr));
    overflow-x: auto;
    scrollbar-color: #ff2aa3 #13091a;
  }
  .world-clock {
    padding-block: 12px;
  }
  .world-clock time {
    font-size: 1.28rem;
  }
}
@media (max-width: 650px) {
  .ticker {
    height: auto;
    flex-wrap: wrap;
  }
  .ticker > span,
  .ticker > button {
    height: 52px;
  }
  .ticker > span {
    display: flex;
    align-items: center;
  }
  .ticker .crawl {
    order: 3;
    display: block;
    flex: 0 0 100%;
    padding: 8px 12px;
    border-top: 1px solid #72536e;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .ticker .crawl::-webkit-scrollbar {
    display: none;
  }
}
@media (max-width: 430px) {
  .world-clock-banner > header {
    display: grid;
  }
  .world-clock-banner header span {
    text-align: left;
  }
}