.tech-connect.block {
  padding-block: 93px 91px;
  overflow: hidden;

  @media (width >= 768px) {
    padding-block: 82px 85px;
  }
  
  @media (width >= 1200px) {
    padding-block: 147px 54px;
  }

  .tech-connect__header {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 59px;

    @media (width >= 768px) {
      margin-bottom: 38px;
    }

    @media (width >= 1200px) {
      margin-bottom: 100px;
    }

    .tech-connect__eyebrow-main {
      margin-bottom: 16px;
      
      * {
        color: var(--corp-color-text);
        opacity: 0.5;
        font-size: var(--corp-type-mobile-tag-1-font-size);
        font-weight: var(--corp-type-mobile-tag-1-font-weight);
        line-height: var(--corp-type-mobile-tag-1-line-height);
      }

      @media (width >= 768px) {
        margin-bottom: 13px;

        * {
          font-size: var(--corp-type-tablet-heading-2-font-size);
          line-height: var(--corp-type-mobile-tag-2-line-height);
        }
      }

      @media (width >= 1200px) {
        margin-bottom: 24px;

        * {
          font-size: var(--corp-type-desktop-heading-4-font-size);
          line-height: var(--corp-type-desktop-heading-4-line-height);
        }
      }
    }

    .tech-connect__heading {

      * {
        color: var(--corp-color-primary);
        font-size: var(--corp-type-mobile-display-2-font-size);
        font-weight: var(--corp-type-mobile-display-2-font-weight);
        line-height: var(--corp-type-mobile-display-5-line-height);

        @media (width >= 1200px) {
          font-size: var(--corp-type-desktop-heading-xxl-font-size);
          line-height: var(--corp-type-desktop-heading-xxl-line-height);
        }
      }

    }
  }

  .tech-connect__items {
    position: relative;

    .tech-connect__timeline {

      .for-tab,
      .for-desktop {
        display: none;
      }

      @media (width >= 768px) {
        position: absolute;
        width: 14%;
        margin-left: 9px;
        height: 100%;
        top: 86px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1;

        .for-tab {
          display: block;
        }

        svg {
          width: 100%;
          height: 100%;
        }
      }

      @media (width >= 1200px) {
        width: 17%;
        margin-left: -56px;
        top: 90px;

        .for-tab {
          display: none;
        }

        .for-desktop {
          display: block;
        }
      }
    }
  }

  .tech-connect__item {
    position: relative;
    z-index: 2;
    row-gap: unset;

    .tech-connect__item-node {
      display: flex;
      align-items: center;
      column-gap: 8px;
      margin-bottom: 20px;

      .tech-connect__subtitle {
        color: var(--corp-color-text);
        opacity: 0.5;
        font-size: var(--corp-type-mobile-body-sm-font-size);
        font-weight: var(--corp-type-mobile-body-sm-font-weight);
        line-height: var(--corp-type-mobile-body-sm-line-height);
      }

      svg {
        width: 32px;
        height: 32px;
      }

      @media (width >= 768px) {
        display: none;
      }
    }

    .second-div {
      display: none;

      @media (width >= 768px) {
        display: flex;
      }

      svg {
        @media (width >= 768px) {
          width: 40px;
          height: 40px;
        }

        @media (width >= 1200px) {
          width: 70px;
          height: 70px;
        }
      }
    }

    &.tech-connect__item--0 {

      .tech-connect__media { 
        margin-top: 50px;
        margin-bottom: 75px;

        .media-line {
          display: block;
          bottom: 15px;
        }
      }

      @media (width >= 768px) {

        .tech-connect__media { 
          margin-top: 0;
          margin-bottom: 0;

          .media-line {
            display: none;
          }
        }

        margin-bottom: 0;

        .second-div {
          justify-content: flex-end;
          padding-top: 66px;

          svg {
            margin-right: 6px;
          }
        }
      }

      @media (width >= 1200px) {
        margin-bottom: 134px;

        .second-div {
          justify-content: flex-end;
          padding-top: 66px;

          svg {
            margin-right: 6px;
          }
        }
        
      }
    }

    &.tech-connect__item--1 {

      .tech-connect__media { 
        margin-top: 108px;
        margin-bottom: 77px;

        .media-line {
          display: block;
          bottom: 10px;
        }
      }

      @media (width >= 768px) {

        .tech-connect__media { 
          margin-top: 0;
          margin-bottom: 0;

          .media-line {
            display: none;
          }
        }

        margin-bottom: 59px;

        .second-div {
          padding-top: 55px;
        }

        svg {
          margin-left: 38%;
        }
      }

      @media (width >= 1200px) {
        margin-bottom: 174px;

        .second-div {
          padding-top: 97px;
        }

        svg {
          margin-left: 0;
        }

        .tech-connect__title {
          width: 90%;
        }
      }

      @media (width >= 1600px) {
        svg {
          margin-left: 38%;
        }
      }
    }

    &.tech-connect__item--2 {
      
      .tech-connect__media { 
        margin-top: 65px;
      }

      @media (width >= 768px) {
        
        .tech-connect__media { 
          margin-top: 0;
        }

        .second-div {
          padding-top: 61px;
          justify-content: center;
        }
  
        svg {
          margin-left: 19%;
        }
      }

      @media (width >= 1200px) {
        .second-div {
          padding-top: 61px;
          justify-content: center;
        }
  
        svg {
          margin-left: 27px;
        }
      }

      @media (width >= 1600px) {
        svg {
          margin-left: 33%;
        }
      }
    }

    .tech-connect__media {
      order: 3;
      margin: 0 auto;

      @media (width >= 768px) {
        order: unset;
        margin: 0;
      }

      img {
        height: auto;
        width: 100%;
        position: relative;
        z-index: 1;
      }

      .media-line {
        display: none;
        position: absolute;
        left: 50%;
        transform: translateX(50%);
      }

      .tech-connect__item-line {
        display: none;
      }
    }

    .tech-connect__content {
      display: flex;
      flex-direction: column;
      justify-content: center;
      order: 2;

      .tech-connect__subtitle {
        display: none;
        color: var(--corp-color-text);
        opacity: 0.5;
        font-weight: var(--fw-500);
      }

      .tech-connect__title {
        margin-bottom: 16px;

        * {
          color: var(--corp-color-text);
          font-size: var(--corp-type-mobile-display-2-font-size);
          font-weight: var(--corp-type-mobile-display-2-font-weight);
          line-height: var(--corp-type-mobile-display-5-line-height);
        }
      }

      .tech-connect__desc {
        margin-bottom: 20px;

        * {
          color: var(--corp-color-overlay-black-60);
          font-size: var(--corp-type-mobile-body-2-font-size);
          font-weight: var(--corp-type-mobile-body-2-font-weight);
          line-height: var(--corp-type-mobile-body-2-line-height);
        }
      }

      .tech-connect__cta {
        a {
          color: var(--corp-color-primary);
          font-size: var(--corp-type-cta-font-size);
          font-weight: var(--corp-type-cta-font-weight);
          line-height: var(--corp-type-cta-line-height);
          display: flex;
          align-items: center;
          gap: 8px;

          svg {
            width: 8px;
            height: 8px;
            margin: 0;
          }
        }
      }

      @media (width >= 768px) {
        order: unset;

        .tech-connect__subtitle {
          display: block;
          font-size: var(--corp-type-tablet-body-3-font-size);
          line-height: var(--corp-type-mobile-tag-4-line-height);
          margin-bottom: 13px;
        }

        .tech-connect__title {
          margin-bottom: 13px;

          * {
            font-size: var(--corp-type-tablet-heading-xl-font-size);
            line-height: var(--corp-type-tablet-display-4xl-line-height);
          }
        }

        .tech-connect__desc {
          margin-bottom: 18px;

          * {
            font-size: var(--corp-type-tablet-body-lg-font-size);
            font-weight: var(--corp-type-tablet-body-3-font-weight);
            line-height: var(--corp-type-tablet-display-6xl-line-height);
          }
        }

        .tech-connect__cta {
          a {
            font-size: var(--corp-type-tablet-body-sm-3-font-size);
            font-weight: var(--corp-type-tablet-body-sm-3-font-weight);
            line-height: var(--corp-type-tablet-body-sm-3-line-height);
            gap: 4px;
            align-items: flex-end;

            svg {
              width: 5px;
              height: 5px;
              margin: 0;
            }
          }
        }
      }
      
      @media (width >= 1200px) {
        .tech-connect__subtitle {
          font-size: var(--corp-type-desktop-heading-4-font-size);
          font-weight: var(--corp-type-desktop-heading-4-font-weight);
          line-height: var(--corp-type-desktop-caption-5-line-height);
          margin-bottom: 24px;
        }

        .tech-connect__title {
          margin-bottom: 24px;

          * {
            font-size: var(--corp-type-desktop-heading-lg-font-size);
            font-weight: var(--corp-type-desktop-heading-lg-font-weight);
            line-height: var(--corp-type-desktop-caption-4-line-height);
          }
        }

        .tech-connect__desc {
          margin-bottom: 32px;

          * {
            font-size: var(--corp-type-desktop-body-3-font-size);
            font-weight: var(--corp-type-desktop-body-3-font-weight);
            line-height: var(--corp-type-desktop-caption-7-line-height);
          }
        }

        .tech-connect__cta {
          a {
            font-size: var(--corp-type-desktop-body-3-font-size);
            font-weight: var(--corp-type-desktop-body-3-font-weight);
            line-height: var(--corp-type-desktop-caption-7-line-height);
            gap: 8px;

            svg {
              width: 9px;
              height: 9px;
            }
          }
        }
      }
    }
  }
}