.quick-contact {
  grid-template-columns: repeat(4, 1fr);
}

.hours-card {
  position: relative;
  min-width: 0;
}

.hours-card summary {
  min-height: 100%;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 25px 28px;
  cursor: pointer;
  list-style: none;
}

.hours-card summary::-webkit-details-marker { display: none; }
.hours-card summary > span {
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(78,212,255,.13);
  color: var(--cyan);
  font-size: 20px;
}
.hours-card summary > div { display: grid; min-width: 0; }
.hours-card small { color: #96a9bd; font-style: normal; }
.hours-card strong { margin-top: 3px; font-size: 14px; }
.hours-card strong.open { color: #5ee6a8; }
.hours-card strong.closed { color: #ffb9a9; }
.hours-card em { margin-top: 2px; color: #b8cadb; font-size: 10px; font-style: normal; line-height: 1.35; }
.hours-card summary::after { content: "+"; margin-left: auto; color: #96a9bd; font-weight: 800; }
.hours-card[open] summary::after { content: "−"; }

.hours-list {
  position: absolute;
  z-index: 20;
  top: calc(100% + 10px);
  right: 0;
  width: min(310px, 92vw);
  padding: 16px 18px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 16px;
  background: #0b203a;
  box-shadow: 0 20px 45px rgba(0,0,0,.28);
}
.hours-list div { display: flex; justify-content: space-between; gap: 24px; padding: 7px 0; color: #afc1d2; font-size: 12px; }
.hours-list b { color: #fff; white-space: nowrap; }

@media (max-width: 1100px) {
  .quick-contact { grid-template-columns: 1fr 1fr; }
  .quick-contact > :nth-child(2) { border-right: 0; }
  .hours-card { border-top: 1px solid rgba(255,255,255,.12); }
}

@media (max-width: 640px) {
  .quick-contact { grid-template-columns: 1fr; }
  .hours-card { width: 100%; min-height: 0; border: 1px solid rgba(255,255,255,.1); border-radius: 15px; background: rgba(255,255,255,.045); overflow: hidden; }
  .hours-card summary { width: 100%; min-height: 0; height: auto; padding: 14px 13px; gap: 13px; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
  .hours-card summary > span { flex-basis: 43px; width: 43px; height: 43px; border-radius: 13px; }
  .hours-card summary > div { flex: 1 1 auto; width: 0; }
  .hours-card strong { font-size: 13px; }
  .hours-card[open] summary { border-bottom: 1px solid rgba(255,255,255,.1); }
  .hours-list { position: static; width: auto; max-width: none; margin: 0; padding: 10px 14px 13px; border: 0; border-radius: 0; background: rgba(4,16,31,.42); box-shadow: none; }
  .hours-list div { gap: 12px; padding: 8px 0; }
}