/* ******************************************************
  image_max_90.css
  Responsive image container:
  - Max width: 90% of viewport (90vw), capped at 1920px
  - Rounded corners on BOTH container and image
  - Transparent background
  - Preserves 1920x700 aspect ratio by default
****************************************************** */

.image_max_90{
  width: min(90vw, 1920px);   /* never wider than 90% of screen, capped at 1920px */
  margin: 16px auto;          /* centered */
  border-radius: 18px;        /* rounded corners */
  background: transparent;    /* transparent container */
  overflow: hidden;           /* clips image to rounded corners */
  line-height: 0;             /* removes inline-image gap */
}

.image_max_90 img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1920 / 700;   /* preserves the banner shape */
  object-fit: contain;        /* shows the entire image */
  border: 0;
  background: transparent;
  border-radius: inherit;     /* ensures the image itself has rounded corners */
}

@media (max-width: 520px){
  .image_max_90{ border-radius: 14px; }
}