.page-hbrain-training {
  /* MOBILE BREAKPOINT LENGTH 1026px */

  .section-banner {
    width: 100%;
    background:
      radial-gradient(
          37.64% 105.4% at 1.66% 69.09%,
          rgba(62, 176, 234, 0.2) 0%,
          rgba(2, 41, 67, 0.2) 100%
        )
        /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */,
      radial-gradient(
          61.39% 93.6% at 100% -20.45%,
          rgba(32, 147, 221, 0.44) 0%,
          rgba(2, 41, 67, 0.44) 100%
        )
        /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */,
      radial-gradient(67.85% 101.04% at 47.29% 71.27%, #1577b4 0%, #022943 100%)
        /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
    background-blend-mode: lighten, lighten, normal;

    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    padding: 48px 128px;
    gap: 100px;

    @media (max-width: 1026px) {
      padding: 48px 16px;
    }

    > div:nth-of-type(1) {
      max-width: 700px;

      @media (max-width: 1026px) {
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      h1 {
        color: var(--grey-100);
        margin-bottom: 20px !important;
        b {
          color: color-mix(in srgb, var(--teal-100), var(--teal-300) 50%);
          text-shadow: 2px 2px 16px color-mix(in srgb, var(--teal-100), transparent 95%)
        }
      }

      > h2:first-of-type {
        margin-bottom: 20px !important;
      }

      h2 {
        color: var(--grey-100);
        margin-bottom: 54px !important;
        text-align: justify;

        @media (max-width: 1026px) {
          text-align: center;
        }

        b {
          color: var(--teal-300);
          text-decoration: underline;
          cursor: pointer;
          transition: color 0.2s ease;
        }

        b:hover {
          color: var(--teal-500);
        }
      }
    }

    > div:nth-of-type(2) {
      @media (max-width: 1026px) {
        display: none;
      }

      max-width: 400px;
      max-height: 400px;
      min-width: 300px;
      border-radius: 129px 4px 129px 129px;
      overflow: hidden;
      background: linear-gradient(
        111deg,
        var(--accent-400) 0%,
        var(--accent-600) 50%,
        var(--accent-500) 100%
      );
      padding: 2px;

      img {
        width: 390px;
        height: 390px;
        border-radius: 129px 4px 129px 129px;
        object-fit: cover;
      }
    }
  }
}