main.page-about {
  background-color: #fff;

  // Muti-column section
  .multicolumn {
    $itemWidth: 310px;
    $mobileItemWidth: 152px;

    background-color: #F0F5FD;

    @media screen and (min-width: 750px) {
      .grid {
        column-gap: 74px;
        row-gap: 32px;
      }
    }

    .page-width {
      padding: 0 0 32px 0;

      @media screen and (min-width: 750px) {
        padding-bottom: 58px;
      }
    }

    .title-wrapper-with-link,
    .button {
      display: none;
    }

    .multicolumn-list {
      column-gap: 24px;
      row-gap: 24px;

      > li {
        width: $mobileItemWidth;

        @media screen and (min-width: 990px) {
          padding-left: 2px;
        }

        @media screen and (min-width: 750px) {
          width: $itemWidth;
        }

        .multicolumn-card {
          background: #DBE5F9;

          .multicolumn-card__image-wrapper {
            margin: 0;
            padding: 24px 16px 0 16px;

            .media {
              width: 32px;
              height: 32px;
              padding-bottom: 0 !important;

              @media screen and (min-width: 750px) {
                width: 48px;
                height: 48px;
              }
  
              .multicolumn-card__image {
                width: inherit;
                height: inherit;
              }
            }
          }

          .multicolumn-card__info {
            padding: 12px 16px 24px;

            .inline-richtext {
              color: #0C2E6E;
              font-size: 14px;
              font-family: var(--font-bold);
              font-weight: 700;
              line-height: 20px;

              @media screen and (min-width: 750px) {
                font-size: 16px;
                line-height: 24px;
              }
            }
            .rte {
              color: #474C60;
              font-size: 12px;
              font-style: normal;
              font-weight: 400;
              line-height: 20px;

              @media screen and (min-width: 750px) {
                font-size: 14px;
                line-height: 20px;
              }

              ul {
                list-style: disc;
              }
            }
          }
        }
      }
    }
  }

  // Muti-row section
  .multirow {
    $verticalMargin: 64px;
    $verticalPadding: 0;
    $avatarSize: 258px;
    $avatarLineSpacing: 72px;
    $rightContentPadding: 0px;

    margin-top: $verticalMargin;
    margin-bottom: $verticalMargin;
    padding-top: $verticalPadding;
    padding-bottom: $verticalPadding;

    .image-with-text {
      margin-top: 24px;
      padding-top: 48px;
      border-top: 1px solid #8B8E98;

      @media screen and (min-width: 750px) {
        margin-top: 72px;
        padding-top: 24px;
      }

      &:first-child {
        margin-top: 0;
      }
    }

    .image-with-text__heading {
      color: #000;
      font-size: 30px;
      font-weight: 500;
      line-height: 45px;
      margin-bottom: 32px;
      position: absolute;
      top: 65px;

      @media screen and (min-width: 750px) {
        position: unset;
        font-size: 38px;
        line-height: 57px;
      }
    }

    .image-with-text__grid--reverse {
      flex-direction: row;
    }

    .image-with-text__content {
      display: initial;
      position: unset;
      padding: $rightContentPadding;
    }

    .image-with-text__content .image-with-text__text+.button {
      display: none;
    }

    .image-with-text__text--caption {
      position: absolute;
      top: 25px;
      left: 0;
      color: #000;
      font-size: 24px;
      font-style: normal;
      font-weight: 500;
      line-height: 36px;
      text-transform: capitalize;

      @media screen and (min-width: 750px) {
        top: 36px;
      }
    }

    .image-with-text__text-item {
      position: unset;
      width: calc(100% - #{$avatarSize});

      @media screen and (min-width: 750px) {
        width: calc(100% - calc(#{$avatarSize} + #{$avatarLineSpacing}));
      }
    }

    .image-with-text__text.rte {
      color: #000;
      font-size: 20px;
      font-style: normal;
      font-family: var(--font-body-family);
      line-height: 30px;
    }

    .image-with-text__media-item {
      $mediaHeight: 355px;
      // height: calc(#{$avatarSize} + #{$avatarLineSpacing});

      @media screen and (min-width: 750px) {
        width: calc(#{$avatarSize} + #{$avatarLineSpacing});
        // height: $avatarSize;
      }
      
      .image-with-text__media {
        height: calc(#{$mediaHeight} + #{$avatarLineSpacing});

        @media screen and (min-width: 750px) {
          width: inherit;
          height: $mediaHeight;
        }
  
        img {
          width: $avatarSize;
          height: $avatarSize;
          object-fit: contain;
          top: 95px;
          left: calc(calc(100% - 258px) / 2);
  
          @media screen and (min-width: 750px) {
            top: 77px;
            left: 0;
          }
        }
  
        @media screen and (min-width: 750px) {
          height: 335px;
        }
      }
    }

    @media screen and (min-width: 750px) {
      .collapse-padding
      .image-with-text__grid--reverse
      .image-with-text__content:not(.image-with-text__content--desktop-center) {
        padding-left: $rightContentPadding;
      }
    }
  }
}