@layer components {
  .simple-page-title-group {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    border-left: 4px solid var(--main-color);
    padding-left: var(--p-md);
    margin-inline: var(--content-spacing);
  }

  .simple-page-title {
    font-size: var(--text-xl);
    border-left: 4px solid var(--main-color);
    padding-left: var(--p-md);
    margin-inline: var(--content-spacing);
  }

  .simple-page-title-group .simple-page-title {
    margin-inline: 0;
    padding-left: 0;
    border-left: none;
  }

  .simple-page-title-description {
    font-size: var(--text-md);
  }

  @media (width < 768px) {
    .simple-page-title {
      font-size: var(--text-lg);
    }
    .simple-page-title-description {
      font-size: var(--text-sm);
    }
  }
}