@charset "UTF-8";

@media screen and (min-width: 769px) and (max-width: 900px) {

  /* 1) Force grid layout on both flow1 & flow2 wrapper_item */
  a[id="flow1"] + .composite_box01 .wrapper_item,
  a[id="flow2"] + .composite_box01 .wrapper_item,
  #flow1 + .composite_box01 .wrapper_item,
  #flow2 + .composite_box01 .wrapper_item {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    column-gap: 24px !important;
    row-gap: 20px !important;
  }

  a[id="flow1"] + .composite_box01 .wrapper_item .inner_item,
  a[id="flow2"] + .composite_box01 .wrapper_item .inner_item,
  #flow1 + .composite_box01 .wrapper_item .inner_item,
  #flow2 + .composite_box01 .wrapper_item .inner_item {
    width: auto !important;
    margin: 0 !important;
    position: relative !important;
  }

  /* 2) Kill ALL old connector pseudo-elements (both the single full bar
        AND the old flow1-only vertical dash-divider) before adding new ones */
  a[id^="flow"] + .composite_box01 .wrapper_item::before,
  a[id="flow1"] + .composite_box01 .wrapper_item .inner_item::after,
  a[id="flow2"] + .composite_box01 .wrapper_item .inner_item::after,
  #flow1 + .composite_box01 .wrapper_item .inner_item::after,
  #flow2 + .composite_box01 .wrapper_item .inner_item::after,
  #flow1 + .composite_box01 .wrapper_item .inner_item:not(:last-child)::after,
  #flow2 + .composite_box01 .wrapper_item .inner_item:not(:last-child)::after {
    content: none !important;
    display: none !important;
  }

  /* 3) Draw the new horizontal connector for BOTH flows,
        only on the LEFT box of each pair (01, 03, 05) */
  a[id="flow1"] + .composite_box01 .wrapper_item .inner_item:nth-of-type(odd)::after,
  a[id="flow2"] + .composite_box01 .wrapper_item .inner_item:nth-of-type(odd)::after,
  #flow1 + .composite_box01 .wrapper_item .inner_item:nth-of-type(odd)::after,
  #flow2 + .composite_box01 .wrapper_item .inner_item:nth-of-type(odd)::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    right: -24px !important;
    width: 24px !important;
    height: 14px !important;
    transform: translateY(-50%) !important;
    background: var(--i_sub_color, #1a8a9e) !important;
    z-index: 2 !important;
    pointer-events: none !important;
  }
}