:root {
    --default-bg: #fdfdfd;
}

body {
    margin: 0;
}

.video-container {
    position: relative;
    height: 40vh;
    overflow: hidden;
}

    .video-container video {
        position: absolute;
        bottom: 0;
        top: 50%; /* It positions the element so that its top edge is at 50% of the height of the parent container */
        left: 50%; /*  It positions the element so that its left edge is at 50% of the width of the parent container */
        /* The element's top-left corner is now placed at the center point of the parent*/

        transform: translate(-50%, -50%); /* Moves the element's position by -50% of its own width horizontally and -50% of its own height vertically. */
        /* This effectively centers the element both horizontally and vertically within the parent container */

        object-fit: cover; /* Ensures that the video zooms to fill the entire container while maintaining its aspect ratio */
        width: 100%;
        height: 100%;
        clip-path: polygon(0 10%, 100% 0%, 100% 90%, 0% 100%);
    }

.centered-image {
    display: block; /* Makes the image a block-level element */
    margin: 0 auto; /* Auto margins on the sides centers the block horizontally */
    max-width: min(720px, 60vw); /* Limits the image width to 60% of the viewport width */
    height: auto; /* Ensures the image height adjusts automatically to maintain the aspect ratio */
}