@use "../abstracts/" as *;

.project-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;

  // mobile to smaller laptop screen sizes
  @include responsive(laptop) {
    @include flex-column-center;
    gap: 5rem;

    /* 
    important for second project, otherwise screenshot below text-container;
    could be done with separate class for 2nd project and flex-dir: col-reverse for media query too
    */
    & > img {
      order: -1;
    }
  }
}