.practice-session {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto 18px;
  padding: clamp(18px, 3vw, 28px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 22px;
  align-items: center;
  color: #102f55;
  background: #fff;
  border: 1px solid rgba(33, 78, 120, .2);
  border-top: 4px solid #c04a50;
  border-radius: 18px;
  box-shadow: 0 14px 34px rgba(7, 27, 58, .09);
}

.practice-session[hidden] {
  display: none;
}

.practice-session h2 {
  margin: 4px 0 7px;
  color: #071b3a;
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  line-height: 1.1;
}

.practice-session p {
  max-width: 68ch;
  margin: 0;
  color: #405c78;
  line-height: 1.55;
}

.practice-session__eyebrow {
  color: #a53740;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.practice-session__durations {
  display: grid;
  grid-template-columns: repeat(4, minmax(78px, 1fr));
  gap: 8px;
}

.practice-session button {
  min-height: 46px;
  padding: 10px 14px;
  color: #123d69;
  background: #edf3f8;
  border: 1px solid #b8cbdd;
  border-radius: 11px;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}

.practice-session button:hover {
  border-color: #214e78;
  background: #e1ebf4;
}

.practice-session button:focus-visible {
  outline: 3px solid rgba(192, 74, 80, .35);
  outline-offset: 2px;
}

.practice-session button.primary {
  color: #fff;
  background: #123d69;
  border-color: #123d69;
}

.practice-session button.quiet {
  background: #fff;
}

.practice-session__durations button {
  display: grid;
  justify-items: center;
  gap: 1px;
}

.practice-session__durations strong {
  color: #071b3a;
  font-size: 1.3rem;
}

.practice-session__durations span {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.practice-session .practice-session__last {
  margin-top: 8px;
  color: #214e78;
  font-weight: 700;
}

.practice-session__active {
  grid-column: 1 / -1;
  display: flex;
  gap: 22px;
  align-items: center;
  justify-content: space-between;
}

.practice-session__active > div:first-child {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 16px;
  align-items: baseline;
}

.practice-session__active .practice-session__eyebrow {
  flex-basis: 100%;
}

.practice-session__clock {
  min-width: 5.2ch;
  color: #071b3a;
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.8rem, 4vw, 2.75rem);
  line-height: 1;
}

.practice-session__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.learning-shell[inert] {
  opacity: .58;
  filter: saturate(.65);
}

@media (max-width: 820px) {
  .practice-session {
    grid-template-columns: 1fr;
  }

  .practice-session__durations {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .practice-session__active {
    align-items: stretch;
    flex-direction: column;
  }

  .practice-session__controls {
    justify-content: flex-start;
  }
}

@media (max-width: 440px) {
  .practice-session {
    width: min(100% - 20px, 1180px);
    padding: 16px;
  }

  .practice-session__controls > button {
    flex: 1 1 100%;
  }
}