/* Course summary and kt cloud introduction from the supplied composition. */
.course-brand,
.course-brand * { box-sizing: border-box; }
.course-brand {
  color: #f5f4f7;
  background: #000;
  font-family: var(--course-font-family, techupSans, Arial, sans-serif);
}
.course-brand .course-brand-title { margin: 0 0 var(--course-heading-gap, 32px); }
.course-brand .course-brand-skills {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(880px, 100%);
  margin: 0 auto;
  padding: 28px 24px;
  list-style: none;
  border-radius: 20px;
  background: #fff;
  color: #111;
}
.course-brand .course-brand-skills li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0 14px;
  font-size: var(--course-caption-size, 14px);
  font-weight: 500;
  line-height: 1.6;
  overflow-wrap: break-word;
  word-break: keep-all;
}
.course-brand .course-brand-skills li + li { border-left: 1px solid #e2e4e7; }
.course-brand .course-brand-skills li > span:last-child { color: #111; }
.course-brand .course-brand-number {
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #d7f5e8;
  color: #00865c;
  font-weight: 700;
}
.course-brand .course-brand-story {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 48px;
  margin-top: 64px;
}
.course-brand .course-brand-art {
  position: relative;
  width: 100%;
  margin: 0;
  aspect-ratio: 550 / 480;
  overflow: hidden;
}
/* Retain the supplied artwork exactly: display its 550×480px area at (340,396).
   Headings, skills and body copy are rendered separately as editable HTML. */
.course-brand .course-brand-art img {
  position: absolute;
  display: block;
  width: 349.090909%;
  max-width: none;
  height: auto;
  left: -61.818182%;
  top: -82.5%;
  margin: 0;
}
.course-brand .course-brand-copy { min-width: 0; }
.course-brand .course-brand-copy h3 {
  margin: 0 0 var(--course-block-gap, 24px);
  color: #f5f4f7;
  font-size: var(--course-subtitle-size, 24px);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -.035em;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.course-brand .course-brand-copy p {
  margin: 0;
  color: #dedce0;
  font-size: var(--course-body-size, 16px);
  font-weight: 400;
  line-height: 1.75;
  word-break: keep-all;
  overflow-wrap: break-word;
}
@media (max-width: 1000px) {
  .course-brand .course-brand-skills { padding: 24px 12px; }
  .course-brand .course-brand-skills li { padding-inline: 10px; }
  .course-brand .course-brand-story { gap: 32px; margin-top: 48px; }
}
@media (max-width: 700px) {
  .course-brand .course-brand-skills { grid-template-columns: minmax(0, 1fr); padding: 8px 20px; border-radius: 16px; }
  .course-brand .course-brand-skills li { justify-content: flex-start; gap: 12px; padding: 16px 0; font-size: 14px; }
  .course-brand .course-brand-skills li + li { border-left: 0; border-top: 1px solid #e2e4e7; }
  .course-brand .course-brand-story { grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 40px; }
  .course-brand .course-brand-art { max-width: 460px; margin-inline: auto; }
}

/* Extra breathing room for the fullstack brand introduction. */
.course-design .course-section.course-brand {
  padding-block: calc(var(--course-section-gap, 96px) * 1.5);
}