.video-frame {
    position: relative;
    /* The height will be adjusted as a hook in the initialise section */
    height: 38vw;
    /* height: 550px; */
    /* overflow: hidden; */
    background-color: black; 
}

.video-frame.equator {
    width: 100%;
}
.equator-video {
    position: absolute;
    top: 1.4%;
    right: 1.2%;
    width: 87%;
    /* height: auto; */
    /* transform: rotate(90deg); */
}
.video-frame .equator-image {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    /* height: auto; */
    object-fit: contain; /* Ensures the image covers the entire container */
    /* z-index: 1; Place the image atop of the video */
}

.video-frame.rest {
    width: 100%;
}
.rest-video {
    position: absolute;
    top: 0.9%;
    right: 1.8%;
    width: 66.6%;
    /* height: auto; */
}
.video-frame .rest-image {
    position: absolute;
    top: 0.5%;
    right: 0;
    width: 87%;
    /* height: auto; */
    object-fit: contain; /* Fit the entire image within the container */
    z-index: 1; /* Place the image atop of the video */
}

.video-frame .label-left {
    position: absolute;
    right: 73%;
    top: 48%;
    transform: translateY(-50%) rotate(-90deg);;
    background-color: rgba(104, 101, 101, 0.8); /* Optional: background for readability */
    padding: 5px;
    border-radius: 3px;
}

.video-frame .label-bottom {
    position: absolute;
    top: 88%; /* Set the distance from top as 28th of the viewport width */
    right: 35%; 
    background-color: rgba(104, 101, 101, 0.8); /* Optional: background for readability */
    padding: 5px;
    border-radius: 3px;
}