.two-column-section{
  background: #fff;
  padding:40px 50px;

  @media(max-width:767px){
    padding:20px 20px;
  }

  & .two_column_layout{
    display: flex;
    gap:8px;

    & .two-column__block{
      flex:1;

      & h2{
        color: #333;
        font-family: var(--font-heading-family);
        font-size: 34px;
        font-style: normal;
        font-weight: var(--font-heading-weight);
        line-height: 36px;
        margin: 0 0 30px;

        @media(max-width:767px){
          font-size: 26px;
          line-height: 28px;
        }
      }

      & .two-column-description + .cards-grid__button{
        margin-top: 20px;
      }

      & .cards-grid__button{
        color: #fff;
        text-align: center;
        font-family: var(--font-button-family);
        font-size: 14px;
        font-style: normal;
        font-weight: var(--font-button-weight);
        line-height: 18px;
        text-decoration: none;
        border-radius: 200px;
        background: #036;
        display: inline-flex;
        padding: 14px 20px;
        justify-content: center;
        align-items: center;
        text-transform: uppercase;
        min-width: 120px;

        &:hover{
          background: #00264B;
        }
      }

      & p{
        color: #333;
        font-family: var(--font-body-family);
        font-size: 16px;
        font-style: normal;
        font-weight: var(--font-body-weight);
        line-height: 22px;
        margin: 0 0 20px;

        & strong{
          font-family: var(--font-heading-family);
          font-weight: var(--font-heading-weight);
        }

        @media(max-width:767px){
          font-size: 14px;
          line-height: 20px;
        }
      }

      & ul,
      & ol{
        margin:0 0 20px;
        padding-left:20px;
        display:flex;
        flex-direction:column;
        gap:6px;

        li{
          color: #333;
          font-family: var(--font-body-family);
          font-size: 16px;
          font-style: normal;
          font-weight: var(--font-body-weight);
          line-height: 22px;
  
          & strong{
            font-family: var(--font-heading-family);
            font-weight: var(--font-heading-weight);
          }
  
          @media(max-width:767px){
            font-size: 14px;
            line-height: 20px;
          }
        }
      }

      .two-column-description > *{
        margin: 0 0 20px;
      }

      .two-column-description > :last-child{
        margin-bottom:  0;
      }

      &:first-child{
        padding-right: 16px;
      }

      &:last-child{
        padding-left: 16px;
      }

      @media(max-width:767px){
        &:first-child{
          padding-right: 0px;
        }
  
        &:last-child{
          padding-left: 0px;
        }
      }
    }

    @media(max-width:767px){
      gap:40px;
      flex-direction: column;
    }
  }
}