/* */ .wide-only, .narrow-only { display: block; text-align: center; box-sizing: border-box; position: relative; } .wide-only img, .narrow-only img { max-width: 100%; width: auto; height: auto; } @media screen and (max-width: 800px) { .wide-only { display: none; } } @media screen and (min-width: 800px) { .narrow-only { display: none; } .wide-only img { max-height: 90vh; width: auto; } } /* */ .scroll-container { box-sizing: border-box; text-align: center; width: 100%; padding: 0.5rem; border: 4px dashed #82d282; border-radius: 1rem; background-color: rgba(255, 255, 255, 0.5); } .scroll-container img { max-width: 100%; height: auto; border-radius:1rem; } @media screen and (min-width: 800px) { .scroll-container { max-height: 70vh; overflow: auto; } }