.ui-typography,
.ui-typography > p {
  line-height: 1.5;
  font-size: 16px;
}
.ui-typography > p {
  margin: 10px 0;
}
.ui-typography > p:last-child {
  margin-bottom: 0;
}

.ui-text-center {
  text-align: center;
}

.ui-section {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 30px 0;
}

.ui-section-title {
  --text: 28px;
  --leading: 100%;
  font-weight: 700;
  font-size: var(--text);
  line-height: var(--leading);
}

.ui-section-title--xl {
  --text: 36px;
}

.ui-section-title--sm {
  font-size: 20px;
  color: var(--txt-blue);
}

.ui-txt-light {
  color: var(--txt-white);
}

.ui-txt-content {
  --text: 17px;
  --leading: 120%;
  font-size: var(--text);
  line-height: var(--leading);
}

.ui-txt-content p {
  margin: 0 0 20px;
}

.ui-txt-content > *:first-child {
  margin-top: 0 !important;
}
.ui-txt-content > *:last-child {
  margin-bottom: 0 !important;
}

.ui-txt-content ul {
  list-style: none;
  margin: 0;
  padding: 0;

  display: flex;
  flex-direction: column;
  gap: var(--tmpl-gap);
}
.ui-txt-content ul > li {
  position: relative;
  padding-left: 20px;
}
.ui-txt-content ul > li:before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--blue);
  font-weight: bold;
}

.ui-txt-content li > ul {
  margin-top: 10px;
  gap: 10px;
}
.ui-txt-content li > ul > li {
  padding-left: 10px;
}
.ui-txt-content li > ul > li:before {
  content: "·";
}

.ui-txt-content h2,
.ui-txt-content h3 {
  font-weight: 700;
}

.ui-txt-content h3 {
  margin: 30px 0 20px;
  font-size: var(--tmpl-text-md);
  line-height: var(--tmpl-leading-md);
}

.clr-primary {
  color: var(--txt-blue);
}

@media (max-width: 1023.98px) {
}

@media (max-width: 992.98px) {
}

@media (max-width: 767.98px) {
  .ui-section-title,
  .ui-section-title--xl {
    --text: 24px;
    --leading: 100%;
  }
}

@media (max-width: 567.98px) {
  .ui-typography,
  .ui-typography > p {
    font-size: 14px;
  }
}