/* Practical education: the supplied diagram and copy between courses and the timetable. */
.main-agility {
  padding: 164px 0 170px;
  background: #000;
  color: #fff;
  font-family: techupSans, Arial, sans-serif;
}
.main-agility-inner { width: min(1100px, calc(100% - 48px)); margin-inline: auto; }
.main-agility-heading { position: relative; z-index: 1; text-align: center; }
.main-agility-heading p { margin: 0; font-size: 30px; font-weight: 400; line-height: 1.5; letter-spacing: -.04em; }
.main-agility-heading h2 { margin: 10px 0 0; font-size: 40px; font-weight: 700; line-height: 1.4; letter-spacing: -.04em; }
.main-agility-layout { display: grid; grid-template-columns: 540px minmax(0, 1fr); gap: 44px; align-items: start; margin-top: -34px; }
.main-agility-figure { min-width: 0; margin: 0; }
.main-agility-figure img { display: block; width: 100%; height: auto; }
.main-agility-copy { min-width: 0; padding-top: 120px; }
.main-agility-statement, .main-agility-takeaway { margin: 0; font-size: 20px; font-weight: 400; line-height: 1.5; letter-spacing: -.035em; overflow-wrap: break-word; }
.main-agility-takeaway { margin-top: 32px; }
.main-agility-accent { color: #ff3035; }
.main-agility-takeaway strong { font-weight: 700; }
.main-agility-note { margin-top: 116px; font-size: 14px; line-height: 1.8; letter-spacing: -.035em; overflow-wrap: break-word; }
.main-agility-note p { margin: 0; }
.main-agility-note-title { font-weight: 700; }
@media (max-width: 1100px) {
  .main-agility { padding-block: 110px; }
  .main-agility-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; margin-top: 18px; }
  .main-agility-copy { padding-top: 64px; }
  .main-agility-statement, .main-agility-takeaway { font-size: 18px; }
  .main-agility-note { margin-top: 64px; }
}
@media (max-width: 860px) {
  .main-agility { padding-block: 80px; }
  .main-agility-inner { width: calc(100% - 40px); }
  .main-agility-heading p { font-size: 23px; line-height: 1.45; }
  .main-agility-heading h2 { margin-top: 12px; font-size: 32px; }
  .main-agility-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 36px; }
  .main-agility-figure { width: min(100%, 480px); margin-inline: auto; }
  .main-agility-copy { width: min(100%, 520px); margin-inline: auto; padding: 0; }
  .main-agility-note { margin-top: 44px; }
}
@media (max-width: 420px) {
  .main-agility-heading p { font-size: 20px; }
  .main-agility-heading h2 { font-size: 29px; }
  .main-agility-statement, .main-agility-takeaway { font-size: 17px; line-height: 1.7; }
  .main-agility-note { font-size: 13px; line-height: 1.8; }
}