.main-flow {
    display:flex;
    flex-direction: column;
    width:100%;
    background-color: rgb(255, 213, 0);
    color:rgb(0, 0, 0);
    padding: 2rem;
    font-size: 1.2rem;
}

.image-spread {
position: relative;
  width: 100%;
  height: 1900px; /* Extra height to allow for lots of yellow space */
  overflow: hidden;
}

.item {
    position: absolute;
  /* FORCE the width here. Adjust this number to make them smaller/larger */
  width: 450px;
}


.item img {
  /* CRITICAL: Set a fixed-ish size so they don't grow too large */
    width: 100%;
  height: auto;
  display: block;
}

.item.one {
  top: 0%;
  left: 10%;
}

.item.two {
  top: 22%;
  left: 0%; /* Pushes it to the right side */
}

.item.three {
  top: 1%; /* Large vertical gap */
  left: 60%;
}

.item.four {
  top: 30%; /* Near the bottom */
  left: 50%;
}

.item.five {
  top:62%; /* Near the bottom */
  left: 60%;
}

.item.six {
  top: 50%; /* Near the bottom */
  left: 5%;
}


@media (min-width: 951px) and (max-width:1200px) {

.image-spread {
position: relative;
  width: 100%;
  height: 2500px; /* Extra height to allow for lots of yellow space */
  overflow: hidden;
}

.item.one {
  top: 0%;
  left: 2%;
}

.item.two {
  top: 30%;
  left: 9%; /* Pushes it to the right side */
}

.item.three {
  top: 13%; /* Large vertical gap */
  left: 37%;
}

.item.four {
  top: 47%; /* Near the bottom */
  left: 38%;
}

.item.five {
  top:80%; /* Near the bottom */
  left: 2%;
}

.item.six {
  top: 62%; /* Near the bottom */
  left: 24%;
}


}

/* --- Responsive Layout (Mobile) --- */
@media (max-width: 950px) {
  .image-spread {
    height: auto; 
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .item {
    position: relative; /* Stop floating, start stacking */
    top: auto !important;
    left: auto !important;
    width: 85%; /* Scale for mobile screens */
    margin-bottom: 60px; /* Space between images as you scroll */
  }
}


.central-column {
    display:grid;
    grid-template-columns: 1fr 2fr 1fr;
    padding: 2rem;
}

.central-text {
    grid-column: 2 / 3;
}

h1 {
    font-size: 3rem;
    font-weight: 400;
}

.smaller-text {
    font-size: 1.3rem;
}