/*
// Variables & Definitions
*/


.top-section-2 {
  margin-top: 60px;
  padding-bottom: 40px;
  background-image: linear-gradient(#ecf4f9, #f4f8fa);
  position: relative;

  .before-svg {
    top: 0;
    width: 100%;
    height: 70px;
    position: absolute;
    background: white;
  }

  svg {
    top: 70px;
    width: 100%;
    height: 260px;
    position: absolute;
  }

  .parent {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 10px;
  }
  .div1 {
    grid-area: 1 / 1 / 2 / 2;
  }
  .div2 {
    grid-area: 1 / 2 / 3 / 3;
  }
  .div3 {
    grid-area: 2 / 1 / 3 / 2;
  }

}

/* TABLET */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .top-section-2 {
    padding: 20px 0;
    margin-top: 0;

    .parent {
      grid-template-columns: 1fr;
      grid-template-rows: 1fr;
      grid-column-gap: 0;
    }

    .div1 { grid-area: 1 / 1 / 2 / 2; }
    .div2 { grid-area: 2 / 1 / 3 / 2; }
    .div3 { grid-area: 3 / 1 / 4 / 2; }

    .before-svg {
      top: 0;
      width: 100%;
      height: 350px;
      position: absolute;
      background: white;
    }
    svg {
      top: 350px;
      width: 100%;
      height: 150px;
      position: absolute;
    }

  }
}

/* MOBILE STYLING */
@media screen and (max-width: 767px) {
  .top-section-2 {
    padding: 20px 0;
    margin-top: 0;

    .parent {
      grid-template-columns: 1fr;
      grid-template-rows: 1fr;
      grid-column-gap: 0;
    }
    .div1 { grid-area: 1 / 1 / 2 / 2; }
    .div2 { grid-area: 2 / 1 / 3 / 2; }
    .div3 { grid-area: 3 / 1 / 4 / 2; }

    .before-svg {
      top: 0;
      width: 100%;
      height: 250px;
      position: absolute;
      background: white;
    }
    svg {
      top: 250px;
      width: 100%;
      height: 70px;
      position: absolute;
    }
  } /* .top-section*/
}