/*.lp-moodboard {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  grid-auto-rows: minmax(40px, auto);
  gap: 1.5rem;
  position: relative;
}*/

.lp-moodboard {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  grid-auto-rows: minmax(40px, auto);
  gap: 1.5rem;
  position: relative;
  width: 100vw;      /* full viewport width */
  max-width: 100%;   /* remove max-width 1200px */
  margin: 0;         /* avoid centering container */
}

.lp-moodboard__container {
  max-width: 1200px;
  margin: 0 auto;
  display: contents; /* keeps grid placement intact */
}

.lp-moodboard__item--image {
  position: relative;
  z-index: 1;
}

.lp-moodboard__item--text {
    padding: 3rem;
    background: white;
    position: relative;
    z-index: 4;
}

.lp-moodboard__item--image img {
    width: 100%;
    height: 100%;
    object-fit: cover !important;
    
}

/* IMAGE 1 */
.lp-moodboard__item--image-1 {
    grid-column: 1 / 25;
    grid-row: 1 / 10;
    z-index: 2;

}

/* TEXT 1 */
.lp-moodboard__item--text-1 {
    grid-column: 2 / 15;
    grid-row: 6 / 10;
}

/* IMAGE 2 */
.lp-moodboard__item--image-2 {
    grid-column: 11 / 25;
    grid-row: 9 / 16;

}

/* IMAGE 3: Breakout */
.lp-moodboard__item--image-3 {
    grid-column: 1 / -1;
	grid-row: 13 / 18;
    width: 52vw;
    margin-left: calc(-1 * ((100vw - 1200px) / 2));
    z-index: 1;
}

/* TEXT 2 */
.lp-moodboard__item--text-2 {
    grid-column: 13 / 23;
    grid-row: 16 / 19;
}

/* IMAGE 4 */
.lp-moodboard__item--image-4 {
    grid-column: 1 / 25;
    grid-row: 18 / 26;
}

/* TEXT 3 */
.lp-moodboard__item--text-3 {
    grid-column: 1 / 12;
    grid-row: 26 / 27;
}

/* IMAGE 5: Breakout to right, starts at column 12 */
.lp-moodboard__item--image-5 {
    grid-column: 12 / -1;      /* spans from column 12 to end of grid (full right) */
    grid-row: 25 / 29;
    z-index: 2;
}

.lp-moodboard__item--image-5 {
    grid-column: 12 / -1;
	grid-row: 25 / 29;
    width: 50vw;
    margin-right: calc(-1 * ((100vw - 1200px) / 2));
    z-index: 1;
}

/*.lp-moodboard__item--image-3,
.lp-moodboard__item--image-5 {
    margin-left: 0;
    margin-right: 0;
}*/

/* Responsive adjustments */
@media (max-width: 1024px) {
  .lp-moodboard {
    grid-template-columns: repeat(24, 1fr);
  }
	
/* reset full-bleed for smaller screens */
/*  .lp-moodboard__item--image-3 {
    width: 100%;        
    margin-left: 0;
    grid-column: 1 / -1;
  }*/
}

@media (max-width: 640px) {
  .lp-moodboard {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: 100%;
    padding: 0 10px;
  }

  .lp-moodboard__item {
    width: 100%;
    grid-column: auto;
    grid-row: auto;
	margin: 0;
  }
}