.main-div {
  width: 100%;
  display: grid;
  gap: 2rem;           /* gap-8 */
  padding-left: 1rem;  /* px-4 */
  padding-right: 1rem;
}

/* grid-cols-1 on mobile; 3 columns on lg */
@media (min-width: 64rem) {
  .main-div {
    grid-template-columns: 1fr 2fr 1fr;  /* 1/4 - 1/2 - 1/4 */
  }
}

/* optional helpers if you use them in your prose */
.dark .prose { color: #e5e7eb; }

.main-div img {
  display: block;
  max-width: 100%;       /* never overflow parent */
  height: auto;          /* keep aspect ratio */
  margin-left: auto;
  margin-right: auto;
  border-radius: 8px;
}

/* On large screens, respect 2fr column width */
@media (min-width: 64rem) {
  .main-div img {
    width: 100%;
    max-width: 100%;     /* fully use the center column */
  }
}

/* On very large screens, prevent huge stretch */
@media (min-width: 90rem) {
  .main-div img {
    max-width: 60rem;    /* cap size */
  }
}