.aspectRatioChanger{
    position: relative;

    border-radius: 15px;

    height: min(50dvw, 50dvh);

    max-width: min(100%, 1200px);

    /* background: red; */
    transition: max-width 1s ease;

}

.constantVideoSize {
    position: absolute;
    border-radius: 15px;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%);
}

.aspectRatioChanger:hover {
    max-width: 25%;
    transition: max-width 1s ease;
}

.gridContainer {
    max-width: 1200px;
    padding: 10px;
}

.videoGrid {
    display: inline-grid;


    width: 100%;
    grid-template-columns: auto auto;
    grid-template-rows:  min(calc(100dvw  * (1/2.6)), 462px);

}
.videoGrid2 {
    margin-top: min(3dvw, 50px);
    display: inline-grid;
    width: 100%;
    grid-template-columns: auto auto;
    grid-template-rows: min(calc(100dvw  * (1/2.6)), 462px);

}

.gridVideo {
    height: 100%;
    /* width: 100%; */
    /* border-style: solid; */
    border-width: 1px;
    border-radius: 10px;
    /* border-color: white; */
}

.arVertical {
    object-fit: cover;
    aspect-ratio: 5/9;
}



.videoGridV {
    display: grid;

    align-self: center;
    /* width: 100%; */
    height: 100%;
    grid-template-columns: 100dvw;
    grid-template-rows: 1fr 1fr;
}