:root {
  --maxw: 1650px;
  --side-pad: 24px;
  --gap: 60px;
  --left-w: 645px;
  --right-w: 945px;
  --c-title: #0A2925;
  --c-body: #678682;
}

.highlights-section {
  background: #fff;
  padding: 0 var(--side-pad);
  margin-top: 136px;
}

.highlights-container {
  max-width: var(--maxw);
}

.hl-title {
  font-size: 48px;
  font-weight: 700;
  line-height: 58px;
  color: var(--c-title);
  margin-bottom: 15px;
}

.hl-subtitle {
  font: 500 24px/100% var(--font);
  font-size: 24px;
  font-weight: 500;
  line-height: 29px;
  margin-bottom: 15px;
  color: var(--c-title);
}

.hl-text {
  font-size: 24px;
  font-weight: 400;
  line-height: 29px;
  color: var(--c-body);
  margin-bottom: 88px;
}

.hl-columns {
  gap: var(--gap);
}

.hl-left {
  flex: 0 0 var(--left-w);
  max-width: var(--left-w);
}

.hl-right {
  flex: 0 0 var(--right-w);
  max-width: var(--right-w);
}

.hl-item {
  margin-bottom: 40px;
}

.hl-figure {
  margin-top: auto;
}

.hl-figure img {
  max-width: 100%;
  height: auto;
}

.hl-right .hl-item {
  max-width: 645px;
  ;
}

@media (max-width: 992px) {
  .hl-columns {
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
  }

  .hl-left, .hl-right {
    flex: 1 1 0;
    max-width: 100%;
  }

  .hl-title {
    font-size: 40px;
    margin-bottom: 32px;
  }

  .hl-subtitle {
    font-size: 22px;
    margin-bottom: 12px;
  }

  .hl-text {
    font-size: 22px;
    margin-bottom: 24px;
  }

  .hl-item {
    margin-bottom: 32px;
  }
}

@media (max-width: 768px) {
  .hl-columns {
    flex-direction: column;
    gap: 32px;
    align-items: stretch;
  }

  .hl-left, .hl-right {
    flex: 1 1 auto;
    max-width: 100%;
  }

  .hl-title {
    font-size: 32px;
    margin-bottom: 28px;
  }

  .hl-subtitle {
    font-size: 20px;
    margin-bottom: 10px;
  }

  .hl-text {
    font-size: 20px;
    margin-bottom: 22px;
  }

  .hl-item {
    margin-bottom: 28px;
  }

  .hl-figure {
    margin-top: 8px;
  }
}

@media (min-width: 800px) and (max-width: 1600px) {
  :root {
    --maxw: 1280px;
    --side-pad: 56px;
    --gap: 44px;
    --left-w: 520px;
    --right-w: 600px;
  }

  .hl-title {
    font-size: 36px;
    line-height: 44px;
    margin-bottom: 12px;
  }

  .hl-subtitle {
    font-size: 18px;
    line-height: 22px;
    margin-bottom: 12px;
  }

  .hl-text {
    font-size: 18px;
    line-height: 24px;
    margin-bottom: 64px;
  }

  .hl-item {
    margin-bottom: 32px;
  }

  .hl-figure img {
    max-width: var(--right-w);
    width: 100%;
    height: auto;
  }
}

@media (min-width: 992px) and (max-width: 1249.98px) {
  .highlights-section { padding: 0 24px; }
  .hl-columns { gap: 32px; }
  .hl-left { flex: 1 1 42%; max-width: 42%; }
  .hl-right { flex: 1 1 58%; max-width: 58%; }
}
