.viewer-wrapper {
    margin-top: 1.5rem;
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9; /* Keeps a clean document-like shape */
    background: white; /* prevents dark edges showing */
    border-radius: 8px;
    overflow: hidden;
    justify-content: center; /* horizontal */
  }
  #newsletter-viewer {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    justify-content: center; /* horizontal */

  }

/* Default widths for wide screens */
.left {
  flex: 1 1 50%;
  box-sizing: border-box;}

.grid-right {
  flex: 1 1 50%;
  padding: 1rem;
  box-sizing: border-box;
}

/* When screen is narrow (phone/tablet), stack them vertically */
@media screen and (max-width: 1200px) {
  .container {
    flex-direction: column;
  }

  .container {
  display: flex;
  gap: 2rem;
}

.left,
.grid-right {
  width: 100%;
}

.left {
  margin: auto;
}
  
.grid-right {
  margin-top: -30%;
display: flex;
justify-content: center; /* horizontal */
}

}

@media screen and (max-width: 1080px) {
  .grid-right {
    margin-top: -35%;
  }
}

@media screen and (max-width: 975px) {
  .grid-right {
    margin-top: -40%;
  }
}

@media screen and (max-width: 800px) {
  .grid-right {
    margin-top: -50%;
  }
}

@media screen and (max-width: 700px) {
  .grid-right {
    margin-top: -85%;
  }
  
}