.header-banner {
  position: relative; height: 0; padding-bottom: 100%;
  background-position: center center; background-size: cover;
  margin-bottom: 2rem;
}

.header-banner--blue {
  background-color: #5BC2E7;
}

.header-banner__content {
  top: 0; right: 0; bottom: 0; left: 0;
  position: absolute;
  padding-left: 5rem;
  padding-right: 5rem;
}

.header-banner__info { padding: 15px; }
.header-banner__title { color: #fff; font-size: 24px; line-height: 1.14; margin: 0; text-transform: uppercase; }
.header-banner__subtitle { color: #fff; font-size: 22px; line-height: 1.3; margin: 0; }
.header-banner__description { color: #fff; font-size: 14px; line-height: 1.3; }

.header-banner__logos { display: none; }

@media (min-width: 410px) {
  .header-banner__title { font-size: 30px; }
  .course--longtitle .header-banner__title { font-size: 24px; }
}
@media (min-width: 576px) {
  .header-banner { padding-bottom: 60%; }
  .header-banner__title { font-size: 42px; }
  .course--longtitle .header-banner__title { font-size: 30px; }
}
@media (min-width: 768px) {
  .header-banner { padding-bottom: 45%; }
  .header-banner__content { padding-right: 35%; }
  .header-banner__logos { position: absolute; top: 0; right: 0; max-width: 240px; padding: 15px; display: flex; flex-wrap: wrap; }
  .header-banner__logos img { margin-bottom: 5px; }
}
@media (min-width: 992px) {
  .header-banner { padding-bottom: 25%; border-radius: 10px; }
  .header-banner__content { padding-right: 50%; }
}