@use './_theme';

$page-padding-x: 20px;

.personal-information-ng {
  .main-content {
    box-sizing: border-box;
    margin: auto;
    max-width: 600px;
    padding-left: $page-padding-x;
    padding-right: $page-padding-x;
    width: 100%;

    .title {
      color: var(--text-color-ultra-dark);
      font-size: calc(var(--text-size-h4) * 1.2);
      font-weight: normal;
      margin: 30px 0 0;
      text-align: center;

      @media (width > theme.$md) {
        font-size: var(--text-size-h2);
      }

      @media (width > theme.$lg) {
        margin-top: 40px;
      }
    }
  }

  .subtitle {
    color: var(--text-color-dark);
    font-size: var(--text-size-label);
    margin: 10px 0 30px;
    text-align: center;

    @media (width > theme.$md) {
      font-size: var(--text-size-h4);
      margin-bottom: 40px;
    }
  }

  .actions {
    @media (width <= theme.$md) {
      margin-left: -$page-padding-x;
      margin-right: -$page-padding-x;
    }
  }
}
