/* ======================== */
/*           video          */
/* ======================== */

.video {
    position: relative;

    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: var(--p-y) var(--p-x);
    /* margin-bottom: 218rem; */
}

.video__overlay {
    position: absolute;
    top: 50%;
    left: 50%;

    width: 100%;
    height: 100%;
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    
    border-radius: 100%;
    transform: translate(-50%, -50%);
    
    z-index: 10;
}

.video__overlay i {
    font-size: 60rem;
    color: var(--theme-light);
    z-index: 10;
}

.video__overlay img {
    position: absolute;
    top: 50%;
    left: 50%;

    width: calc(100% - 2 * var(--p-x));
    height: calc(100% - 2 * var(--p-y));
    max-width: 1500rem;
    max-height: 860rem;

    object-fit: cover;
    object-position: center;
    
    transform: translate(-50%, -50%);
    border-radius: 12rem;
}

.video video {
    width: 100%;
    max-width: 1500rem;
    max-height: 860rem;

    border-radius: 12rem;
}

/* ============================ */
/*           video tag          */
/* ============================ */

.video video {
    width: 100%;
    max-width: 1500rem;
    max-height: 860rem;

    border-radius: 12rem;
}

@media screen and (min-width: 768px) {
    .video video, .video__overlay img {
        border-radius: 32rem;
    }

    .video__overlay i {
        font-size: 100rem;
        color: var(--theme-light);
    }
}