.crash-course-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin: 0 clamp(24px, 7vw, 110px);
  padding: 26px clamp(22px, 3vw, 42px);
  background: #183f3b;
  color: #fff;
}

.crash-course-banner p {
  margin: 0 0 8px;
  color: #d7e7cf;
  font: 700 9px DM Sans, sans-serif;
  letter-spacing: 1.35px;
}

.crash-course-banner h2 {
  margin: 0;
  font: 600 clamp(27px, 3vw, 42px) / 1 Manrope, sans-serif;
  letter-spacing: -1.4px;
}

.crash-course-banner > div > span {
  display: block;
  max-width: 620px;
  margin-top: 9px;
  color: rgba(255, 255, 255, .72);
  font: 400 13px / 1.55 DM Sans, sans-serif;
}

.crash-course-action {
  display: grid;
  min-width: 195px;
  gap: 5px;
  padding-left: 30px;
  border-left: 1px solid rgba(255, 255, 255, .24);
}

.crash-course-action strong {
  color: #d7e7cf;
  font: 700 12px Manrope, sans-serif;
}

.crash-course-action small {
  color: rgba(255, 255, 255, .68);
  font: 400 10px DM Sans, sans-serif;
}

.crash-course-action a {
  margin-top: 8px;
  color: #fff;
  font: 700 11px DM Sans, sans-serif;
}

@media (max-width: 700px) {
  .crash-course-banner {
    align-items: flex-start;
    flex-direction: column;
    gap: 22px;
  }

  .crash-course-action {
    width: 100%;
    padding: 18px 0 0;
    border-top: 1px solid rgba(255, 255, 255, .24);
    border-left: 0;
  }
}