.day { display: block; padding: 0; }
.day summary { display: grid; grid-template-columns: 100px 1fr 34px; align-items: center; padding: 24px 10px; cursor: pointer; list-style: none; }
.day summary::-webkit-details-marker { display: none; }
.day summary i { color: var(--green); font-size: 1.8rem; font-style: normal; font-weight: 400; text-align: center; transition: transform .2s ease; }
.day[open] summary i { transform: rotate(45deg); }
.day:hover { padding-left: 0; }
.day:hover summary { padding-left: 24px; background: #fff; }
.day-details { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; padding: 0 10px 24px 100px; }
.day-details p { margin: 0; padding: 20px; background: #fff; color: #53616b; font-size: .84rem; }
.day-details strong { display: block; margin-bottom: 7px; color: var(--green); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; }
.day.final summary { padding-left: 24px; }
.day.final summary i { color: var(--gold); }
.day.final:hover summary { background: var(--navy2); }
.day.final .day-details { padding: 0 24px 24px; }
.day.final .day-details p { background: #123e69; color: #d4e0e8; }
.day.final .day-details strong { color: var(--gold); }
@media (max-width: 620px) {
  .day summary { grid-template-columns: 58px 1fr 24px; padding: 19px 4px; }
  .day:hover summary { padding-left: 4px; }
  .day-details { grid-template-columns: 1fr; padding: 0 4px 18px 58px; }
  .day.final summary { padding-left: 10px; }
  .day.final .day-details { padding: 0 10px 18px; }
}