const OverlayContainer = styled.div` left: 0px; right: 0px; bottom: 0px; top: 0px; position: absolute; width: 100%; height: 100%; z-index: 50; display: flex; background-color: rgba(0, 0, 0, 0.5); justify-content: center; align-items: center; @media (max-width: 1024px) { height: 100%; } `; const PopupContainer = styled.div` position: absolute; overflow: hidden; justify-content: center; padding: 1rem; align-items: center; `; const CloseButton = styled.div` position: absolute; z-index: 50; top: 120px; right: 120px; color: #fff; cursor: pointer; :hover { color: #5765f2; } @media (max-width: 1024px) { top: 100px; right: 20px; } `; const FullScreenImage = styled.img` transform: scale(1); transition: transform 0.2s ease-in-out; overflow: scroll; max-height: 500px; max-width: 790px; @media (max-width: 1024px) { max-height: 320px; max-width: 320px; } `; const FullScreenImageContainer = styled.div` max-height: 790px; max-width: 790px; overflow: auto; @media (max-width: 1024px) { max-height: 320px; max-width: 320px; } `; return ( <OverlayContainer> <CloseButton onClick={props.handleClosePopup}> <i className="bi bi-x-lg"></i> </CloseButton> <PopupContainer> <FullScreenImageContainer> <FullScreenImage src={props.imageSrc} /> </FullScreenImageContainer> </PopupContainer> </OverlayContainer> );