.main-work-with-us-grid {
  display: flex;
  flex-direction: column;
  padding-top: 5rem;
  grid-template-rows: 80vh 90vh auto;
  gap: 0;
  border-bottom: 0.125rem solid white;
  overflow-x: hidden;

  a {
    text-decoration: none;
  }
}

.subtitle-regular{
  font-size: clamp(1.25rem, 1.5vw + 0.4rem, 2.25rem);
}

.first-row {
  grid-row: 1;
  grid-template-columns: repeat(4, 1fr);
  display: grid;
  gap: 0.5rem;
  padding-inline: 2rem;

  h2 {
    grid-column: 1 / span 4;
    height: max-content;
  }

  p {
    grid-column: 1 / span 4;
  }

  .button-container {
    grid-column: 1 / span 4;
    gap: 1rem;
    display: flex;
    flex-direction: column;

    button {
      padding-block: 0 !important;
      line-height: normal;
    }
  }
}

.second-row {
  grid-row: 2;
  padding-bottom: 3rem;
  position: relative;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  display: grid;
  position: relative;
  padding-inline: 2rem;

  h2 {
    grid-column: 1 / span 4;
  }

  p {
    grid-column: 1 / span 4;
  }

  a {
    grid-column: 1 / span 4;

    button{
      width: 100%;
      line-height: normal;
    }
  }
}

.backdrop-image-container {
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  padding-inline: 2rem;
  padding-top: 3rem;
  padding-bottom: 2.5rem;
  z-index: -2;

  svg {
    stroke-width: 0.125rem;
    height: auto;
    width: 100%;
    grid-column: 1 / span 4;
    justify-self: end;
  }
}

.third-row {
  grid-row: 3;
  background-color: black;
  color: white;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  display: grid;
  padding-inline: 2rem;
  padding-bottom: 4rem;
  padding-top: 6rem;

  .top-part {
    grid-column: 1 / span 4;

    h2 {
      margin-bottom: 2.5rem;
    }
  }

  .bottom-part {
    grid-column: 1 / span 4;
    display: grid;
    gap: 0.5rem;
    grid-template-columns: repeat(4, 1fr);
    padding-top: 8rem;
  }

  .bottom-part h3,
  .bottom-part p {
    grid-column: 1 / span 4;
  }

  a {
    grid-column: 1 / span 4;

    button {
      width: 100%;
      line-height: normal;
    }
  }
}

@media (min-width: 728px) {
  .main-work-with-us-grid {
    padding-top: 12rem;
  }

  .first-row {
    grid-row: 1;
    grid-template-columns: repeat(8, 1fr);
    padding-inline: 2.5rem;
    height: max-content;
    h2 {
      grid-column: 1 / span 8;
    }

    p {
      grid-column: 1 / span 8;
      padding-top: 6rem;
    }

    .button-container {
      flex-direction: row;
      grid-column: 1 / span 8;
      padding-top: 4rem;

      button {
        width: 50%;
      }
    }
  }

  .backdrop-image-container {
    grid-column: 1 / span 8;
  }

  .backdrop-image-container svg {
    stroke-width: 0.075rem;
    width: 92% !important;
    margin-right: -8rem;
  }

  .second-row {
    grid-row: 2;
    padding-bottom: 4.5rem;
    padding-inline: 2.5rem;
    grid-template-columns: repeat(8, 1fr);

    h2 {
      grid-column: 1 / span 8;
    }

    p {
      grid-column: 1 / span 8;
    }

    a {
      grid-column: 1 / span 4;
    }
  }

  .third-row {
    grid-row: 3;
    padding-inline: 2.5rem;
    padding-top: 8rem;
    grid-template-columns: repeat(8, 1fr);

    .top-part {
      grid-column: 1 / span 8;

      h2 {
        margin-bottom: 4rem;
      }
    }

    .bottom-part {
      grid-column: 1 / span 8;
      display: grid;
      gap: 0.5rem;
      grid-template-columns: repeat(8, 1fr);
      padding-top: 9rem;
      padding-bottom: 4rem;
    }

    a {
      grid-column: 1 / span 5;
      padding-top: 3rem;
    }
  }
}
@media (min-width: 1024px) {
  .main-work-with-us-grid {
    display: grid;
    padding-top: 13rem;
    grid-template-rows: 80vh auto auto;
  }

  .first-row {
    grid-row: 1;
    grid-template-columns: repeat(12, 1fr);
    padding-inline: 2%;

    h2 {
      grid-column: 2 / span 7;
    }

    p {
      grid-column: 2 / span 10;
      padding-top: 4vw;
    }

    .button-container {
      grid-column: 2 / span 6;
      padding-top: 4vw;

      button {
        /* height: 3rem; */
        padding-block: 0.3rem !important;
      }
    }
  }

  .backdrop-image-container {
    grid-column: 5 / span 8;
    padding-inline: unset;
    padding-top: 5rem;
  }

  .second-row {
    grid-row: 2;
    padding-bottom: 8.5rem;
    padding-inline: 2%;
    grid-template-columns: repeat(12, 1fr);

    h2 {
      grid-column: 2 / span 6;
    }

    p {
      padding-top: 4rem;
      grid-column: 2 / span 6;
    }

    a {
      grid-column: 2 / span 3;
      padding-top: 4rem;
    }
  }
  .backdrop-image-container {
    position: absolute;
    top: -50%;
    right: 0;
    height: auto;
    width: 60%;
    z-index: -2;

    svg {
      stroke-width: 0.03rem;
      width: 100%;
      height: auto;
      margin-right: unset;
    }
  }

  .third-row {
    grid-row: 3;
    padding-inline: 2%;
    padding-top: 10rem;
    grid-template-columns: repeat(12, 1fr);

    .top-part {
      grid-column: 2 / span 10;
    }

    .bottom-part {
      grid-column: 2 / span 7;
      display: grid;
      gap: 0.5rem;
      grid-template-columns: repeat(7, 1fr);

      h3 {
        grid-column: 1 / span 7;
      }

      p {
        grid-column: 1 / span 6;
      }

      a {
        grid-column: 1 / span 4;

        button {
          width: 100%;
          line-height: normal;
        }
      }
    }
  }
}