@layer kz-components {
  .body {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--brand-moment-background-color);
  }

  /** @deprecated */
  .positive {
    --brand-moment-background-color: var(--color-green-100);
  }

  .negative {
    --brand-moment-background-color: var(--color-red-100);
  }

  /** end @deprecated */
  .informative {
    --brand-moment-background-color: var(--color-blue-100);
  }

  .success {
    --brand-moment-background-color: var(--color-green-100);
  }

  .warning {
    --brand-moment-background-color: var(--color-red-100);
  }

  .container {
    max-width: var(--layout-content-max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-24);
  }

  @media (width >= 1080px) {
    .container {
      padding: 0 var(--spacing-64);
    }
  }

  @media (width >= 1366px) {
    .container {
      padding: 0 var(--spacing-80);
    }
  }

  .header {
    inline-size: 100%;
    margin-block-end: var(--spacing-24);
  }

  .main {
    flex: 1 0 auto;
    display: flex;
    align-items: center;
    margin-block-end: var(--spacing-64);
  }

  .mainInner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-48) var(--spacing-32);
    align-items: center;
  }

  @media (width >= 768px) {
    .mainInner {
      row-gap: var(--spacing-64);
    }
  }

  @media (width >= 1080px) {
    .mainInner {
      grid-template-columns: 1fr 1fr;
    }
  }

  @media (width >= 1366px) {
    .mainInner {
      column-gap: var(--spacing-80);
    }
  }

  .left {
    display: flex;
    justify-content: center;
  }

  .leftInner {
    width: 100%;
    max-width: 525px;
  }

  .right {
    flex-direction: column;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .rightInner {
    max-width: 543px;
  }

  .subtitle {
    margin-bottom: var(--spacing-12);
  }

  .title {
    margin-bottom: var(--spacing-32);
  }

  .textBody {
    margin-bottom: var(--spacing-32);
  }

  .secondaryAction {
    margin-block-start: var(--spacing-12);
  }

  @media (width >= 768px) {
    .actions {
      display: flex;
    }

    .secondaryAction {
      margin-block-start: 0;
      margin-inline-start: var(--spacing-12);
    }
  }

  @media (width >= 1080px) {
    .left {
      justify-content: flex-end;
    }

    .right {
      align-items: flex-start;
    }
  }

  .footer {
    flex: 0 0 auto;
  }

  .footerInner {
    display: flex;
    flex-direction: column;
    border-block-start: 1px solid var(--color-purple-800);
    border-inline-start: 1px solid var(--color-purple-800);
    padding: var(--spacing-12) var(--spacing-24);
    margin-block-end: var(--spacing-32);
  }

  .poweredByContainer {
    flex: 0 0 auto;
    order: 2;
    display: flex;
  }

  .footerTextContainer {
    flex: 1 1 auto;
    order: 1;
    margin-block-end: var(--spacing-24);
  }

  .poweredByLogo {
    margin-inline-start: var(--spacing-6);

    > img {
      max-width: 133px;
    }
  }

  @media (width >= 1080px) {
    .footerInner {
      flex-direction: row;
      align-items: center;
    }

    .footerTextContainer {
      order: initial;
      margin-block-end: 0;
      margin-inline-start: var(--spacing-24);
    }

    .poweredByContainer {
      order: initial;
    }
  }
}