<style>
        .image-container {
            overflow: hidden;
            max-width: 100vw;
            height: 100vh;
            position: relative;
        }
        .image-wrapper img {
           max-width:400px;
        }

        {{-- .image-wrapper img:hover {
            width: 100%;
            max-width:400px;
            height: auto;
            position:relative;
            top:0;
            left:0;
            transition: transform 1.5s ease;
        } --}}

        .zoom-image {
            width: 100%;
            height: auto;
            transition: transform 1.5s ease;
        }

        .image-container:hover .zoom-image {
            {{-- transform: scale(5); --}}
        }
        .sidebar {
            width: 250px;
            height: 100vh;
            background-color: #f8f9fa;
            padding: 15px;
        }
        .vr-viewer, .img-div {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
            max-height:calc(0.5625*1200px);
        }
        .vr-container, .img-container {
            position: relative;
            width: 100%; /* Full width */
            padding-top: 56.26%; /* 16:9 aspect ratio */
            overflow: hidden; /* Hide overflow */
            max-width:1200px;
        }

        .img-container {
            background-color:#fff;
        }
        .img-div img {
            max-width: 1200px;
            height: 100%;
            {{-- margin-top:20px; --}}
        }

       #theContainer {
            opacity: 1; /* Start hidden */
            transition: opacity 1s; /* Fade transition */
        }
        video { max-width:100%; max-height:100%; background:#fff; }

        .ratio-4-3 {
          width: 100%;               /* or fixed width like 400px */
          aspect-ratio: 4 / 3;       /* keeps 4:3 box */
          overflow: hidden;
          position: relative;
          background: #eee;          /* optional placeholder color */
          max-height:300px;
          max-width:400px;
          margin-bottom:10px;
        }

        .ratio-4-3 img {
          position: absolute;
          top: 50%;
          left: 50%;
          width: 100%;
          height: 100%;
          object-fit: cover;         /* scales and crops to fill */
          transform: translate(-50%, -50%);
          display: block;
          max-height:300px;
          max-width:400px;
        }
        .ratio-4-3-fallback {
          width: 100%;
          max-width: 600px;
          position: relative;
          padding-top: 75%;          /* 3 / 4 = 0.75 -> 75% gives 4:3 */
          overflow: hidden;
          background: #eee;
        }

        .ratio-4-3-fallback img {
          position: absolute;
          top: 50%;
          left: 50%;
          min-width: 100%;
          min-height: 100%;
          object-fit: cover;
          transform: translate(-50%, -50%);
          display: block;
        }


    </style>