body {
    margin: 0;
    /*padding: 50px;*/
}

.hero {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.responsive-video {
    display: none;
    max-width: 100vw;
    max-height: 100vh;
    width: 100%;
    height: 100%;
    margin: auto; /* Optional: centers the video */
}

.responsive-img {
    /*display: none;*/
    max-width: calc(100vw - 10px);
    max-height: calc(100vh - 10px);
    width: auto;   /* Maintains aspect ratio */
    height: auto;  /* Maintains aspect ratio */
    margin: auto;  /* Optional: centers the image */
}

/* For screens wider than 768px (typically tablets and desktops) */
@media (min-width: 768px) {
    .responsive-img {
        max-width: calc(100vw - 50px);
        max-height: calc(100vh - 50px);
    }
}

/* For screens smaller than 768px (typically mobile devices) */
@media (max-width: 767px) {
    .responsive-img {
        max-width: calc(100vw - 10px);
        max-height: calc(100vh - 10px);
    }
    
    .hero {
        display: block;
        padding-top: 20px;
    }

}