.page-hbrain-training {

  .section-meet-instructor {
      width: 100%;
      background-size: 100%, 100%;
    
      background: radial-gradient(
            41.67% 105.14% at 83.44% 6.32%,
            rgba(62, 176, 234, 0.4) 0%,
            rgba(2, 41, 67, 0.4) 100%
          )
          /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */,
        radial-gradient(40.17% 164.85% at -7.47% 131.48%, #3eb0ea 0%, #094972 100%)
          /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
      background-blend-mode: overlay, normal;
    
      padding: 48px 128px;
    
      > div {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        max-width: 1200px;
        margin: 0 auto;
        gap: 54px;
    
        .instructor-image-container {
          max-width: 240px;
          border-radius: 500px;
          overflow: hidden;
          background: linear-gradient(180deg, var(--accent-500) 0%, var(--accent-600) 100%);
          padding: 2px;
    
          img {
            border-radius: 500px;
          }
        }
        > div {
          display: flex;
          flex-direction: column;
          gap: 0;
    
          h1 {
            color: var(--grey-100);
            padding-bottom: 3px;
          }
    
          h2 {
            color: var(--grey-100);
            padding-bottom: 26px;

            @media (max-width: 1026px) {
              text-align: center;
            }
          }
    
          pre {
            color: var(--grey-200);
            padding-bottom: 26px;
          }
    
          p {
            color: var(--grey-100);
            padding-bottom: 16px;
          }
        }
      }
      @media (max-width: 1026px) {
        padding: 48px 16px;
        > div {
          flex-direction: column;
          gap: 20px;
        }
        .instructor-image-container {
          max-width: 400px;
        }
      }
    }
}