.mainGrid-container {
    display: grid;
    grid-template-columns: 25% 50% 25%;
    grid-auto-rows: minmax(100px, auto);
    gap: 0;
    width: 95vw;
    margin: auto;
    margin-top: -8vh;
    /* border: 4px solid #5c915e; */
    place-items: center;
}


.mainGrid-left {
    /* border: 2px solid #06ff8b; */
    grid-column: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80%;
    width: 100%;
    

}


.mainGrid-center {
    /* border: 2px solid #06ff8b; */
    grid-column: 2;
    display: grid;
    grid-template-rows: 65% 15% 15%;
    top:5%;
    height: 90%;
    width: 100%;
    place-items: center;

}

.centerGrid-top {
    /* border: 2px solid #ff0606; */
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    max-height: 100%;
    width: 100%;
    max-width: 100vw;
    
}
.centerGrid-mid{
    /* border: 2px solid #cd06ff; */
    grid-row : 2;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    max-height: 100%;
    width: 100%;
    max-width: 100vw;

}
.centerGrid-mid{
  /* keep it a flex container if you want */
  display: flex;

  /* IMPORTANT: don't center vertically (this causes top/bottom to be cut) */
  align-items: stretch;
  justify-content: center;

  /* allow the child to size itself */
  min-height: 0;
  overflow: visible; /* make sure it's not clipping the card */
}

.centerGrid-bottom{
    /* border: 2px solid #bdff06; */
    grid-row : 3;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    max-height: 100%;
    width: 100%;
    max-width: 100vw;

}
.centerGrid-bottom{
  /* keep it a flex container if you want */
  display: flex;

  /* IMPORTANT: don't center vertically (this causes top/bottom to be cut) */
  align-items: stretch;
  justify-content: center;

  /* allow the child to size itself */
  min-height: 0;
  overflow: visible; /* make sure it's not clipping the card */  
}

.mainGrid-right{
    grid-column: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    /* display: grid;
    grid-template-rows: minmax(0,3fr) minmax(0,1fr); */
    height: 100%;
    width: 100%;
    place-items: center;
    min-height: 0;

}
/* .rightGrid-top{
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    min-height: 0;
    overflow: hidden;

}
.rightGrid-bottom{
    grid-row: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;

} */

/* ---------- Desktop (>= 1350px): prevent mid/bottom overlap ---------- */
@media (min-aspect-ratio: 1/1) {

  .mainGrid-container {
    height: 80vh;
  }

  .mainGrid-center {
    /* fill available height in the 80vh container */
    /* height: 100%; */
    min-height: 0;               /* IMPORTANT: allows grid children to shrink */
    width: 100%;

    display: grid;

    /* Top takes remaining space, mid/bottom size to content (but can wrap) */
    /* grid-template-rows: minmax(0, 1fr) auto auto; */

    row-gap: 12px;               /* real spacing so things don’t touch */
    align-content: stretch;
  }

  .centerGrid-top,
  .centerGrid-mid,
  .centerGrid-bottom {
    min-height: 0;               /* IMPORTANT in nested grid scenarios */
  }

  /* If any of these sections contains large content, don't let it cover others */
  .centerGrid-top {
    overflow: auto;              /* scroll instead of spilling onto other rows */
  }

  .centerGrid-mid,
  .centerGrid-bottom {
    overflow: hidden;            /* or 'auto' if you prefer scrollbars here too */
  }
}


@media (max-aspect-ratio: 1/1) {
  .mainGrid-container{
    display: flex;               /* stack reliably */
    flex-direction: column;
    gap: 24px;                   /* <-- prevents overlap with real spacing */
    width: 100%;
    margin: 0;
    margin-top: 10%;
    padding: 0 0 25% 0;
  }

  /* IMPORTANT: remove percentage heights in stacked mode */
  .mainGrid-left,
  .mainGrid-center,
  .mainGrid-right{
    height: auto;
    min-height: auto;
    width: 100%;
  }

  /* make the center sections size to content + add spacing */
  .mainGrid-center{
    display: grid;
    grid-template-rows: auto auto auto;  /* no percentages */
    row-gap: 16px;
  }

  .centerGrid-top,
  .centerGrid-mid,
  .centerGrid-bottom{
    height: auto;
    max-height: none;                  /* 'auto' is invalid for max-height */
  }
}

}