//Custom breakpoint for contact row
$accordion-break: 720px;

@use "00-base/configure" as *;

.ma__contact-row {
  position: relative;

  .pre-content > &,
  .post-content > &,
  .main-content--full .page-content .layout--onecol-mass-service-section .layout__region--content > &,
  .main-content .page-content .layout--onecol-mass-service-section .layout__region--content .js-lpb-component  > &,
  .main-content--full .page-content > & {

    @include ma-container();
  }

  @media ($bp-large-min) {

    .ma__comp-heading,
    .ma__contact-row__columns {
      width: calc(100% - 300px);
    }
  }

  &__columns {

    @media (min-width: $accordion-break) {
      column-count: 2;
      column-gap: 40px;
      column-rule: 1px solid var(--mf-c-bd-divider);

      .ma__contact-set {
        /* Prevent a single contact-set from breaking across columns */
        break-inside: avoid;
        will-change: transform;

        @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
          overflow: hidden;
        }

      }

      /* Force two columns for 2 and more items (backstop) */

      &:has(.ma__contact-set:nth-child(2)) {
        column-count: 2;
      }
    }
  }

  &__container {

    .ma__image {
      margin-bottom: 1rem;
      width: auto;
      max-width: 300px;

      @media ($bp-large-min) {
        position: absolute;
        top: 0;
        right: 30px;
      }

      @media ($bp-large-max) {
        max-height: 80px;
      }
    }
  }


  &__more-info {
    margin-top: 40px;
  }

  &__expand {
    display: none;
  }

}