.service-about-us {
  background-color: var(--tertiary-white);

  :is(h1, h2, h3, h4, h5, h6) {
    color: var(--secondary-black);
    font-family: var(--body-font-arena);
    font-size: var(--heading-font-size-m);
    font-style: normal;
    font-weight: var(--fw-700);
    line-height: var(--heading-lh-19-mob-text-small);
    margin: 0;
  }
  .about-us-title {
    margin-top: 2.5rem;
    margin-bottom: 1rem;

    :is(h1, h2, h3, h4, h5, h6) {
      @media (width>=1024px) {
        color: var(--primary-black);
        font-size: var(--heading-font-1-des);
        line-height: var(--heading-lh-16-des-display);
      }
    }

    @media (width>=1024px) {
      margin-top: 5rem;
      margin-bottom: 2.5rem;
    }
  }

  .service-cards {
    display: flex;
    gap: 1rem;
    flex-direction: column;

    @media (width>=1024px) {
      flex-direction: row;
      gap: 1.25rem;
    }

    .service-card {
      border: 1px solid var(--light-grey-shade-5);
      background: var(--gradient-5);
      padding: var(--space-24px) var(--space-15px) 0 var(--space-15px);

      @media (width>=1024px) {
        padding: 2.8125rem 3.25rem 0 3.25rem;
        display: flex;
        flex-direction: column;
      }

      .card-icon {
        height: 1rem;
        width: 1rem;
        background: url(/icons/globe.svg) no-repeat center/contain;
        margin-bottom: var(--space-10px);

        @media (width>=1024px) {
          height: 1.5rem;
          width: 1.5rem;
          margin-bottom: 1.1875rem;
        }
      }
      .icon-custom {
        background: none;
      }
      .icon-custom img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
      .icon-2 {
        height: 1.375rem;
        background: url(/icons/verification.svg) no-repeat center/contain;

        @media (width>=1024px) {
          height: 1.875rem;
          width: 1.375rem;
        }
      }
      .icon-3 {
        height: 0.962rem;
        background: url(/icons/tick-mark.svg) no-repeat center/contain;

        @media (width>=1024px) {
          height: 1.5rem;
          width: 1.5rem;
        }
      }

      .card-title {
        :is(h1, h2, h3, h4, h5, h6) {
          font-size: var(--heading-font-size-s);
          color: var(--primary-black);
          line-height: var(--heading-lh-5--mob);

          @media (width>=1024px) {
            line-height: var(--heading-font-17-des);
          }
        }

        margin-bottom: var(--space-8px);
        @media (width>=1024px) {
          margin-bottom: var(--space-12px);
        }
      }
      .card-description {
        margin-bottom: 1.25rem;

        @media (width>=1024px) {
          margin-bottom: 2.25rem;
        }
        p {
          color: var(--primary-black);
          font-family: var(--body-font-arena);
          font-size: var(--body-font-size-xxs);
          font-style: normal;
          font-weight: var(--fw-300);
          line-height: var(--heading-lh-19-mob-display);
          margin: 0;
        }
      }
      .card-design {
        height: 0.25rem;
        width: calc(100% + 2 * var(--space-15px));
        background-color: var(--accent-colours-vibrant-sections-1);
        margin-left: calc(-1 * var(--space-15px));
        margin-right: calc(-1 * var(--space-15px));
        margin-top: auto;

        @media (width>=1024px) {
          width: calc(100% + 2 * 3.25rem);
          margin-left: calc(-1 * 3.25rem);
          margin-right: calc(-1 * 3.25rem);
        }
      }
      .design-2 {
        background-color: var(--accent-colours-vibrant-sections-2);
      }
      .design-3 {
        background-color: var(--accent-colours-vibrant-sections-3);
      }
    }
  }

  &.large-icons {
    .service-card {
      .card-icon {
        height: 6.25rem;
        width: 6.25rem;

        @media (width>=1024px) {
          height: 6.25rem;
          width: 6.25rem;
        }
      }

      .icon-custom {
        display: flex;
        align-items: center;
        justify-content: flex-start;
      }

      .icon-custom img {
        width: auto;
        max-width: 100%;
        height: 100%;
      }
    }
  }
}