.video.wrapper,
.video.wrapper video {
    width: 100%;
}

.video.wrapper img {
    width: 80%;
    bottom: 66.67%;
    transform: translateY(-33.34vw) scaleX(.9);
    margin: 0 auto;
}

.example.three-flex>.child>.image.container {
    background: #f8f8f8;
    background: url("../img/alt.webp") no-repeat no-repeat;
    background-size: cover;
    background-position: 50%;
    height: 18vw;
    /* width: 100%; */
    margin: 1rem;
    border-radius: 1.2rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .08);
    transition: all .2s;
}

.example.three-flex>.child>.image.container:hover {
    transform: scale(1.07);
    z-index: 100;
    box-shadow: 0 6px 20px rgba(64, 64, 64, .18);
}

@media (prefers-color-scheme: dark) {
    .example.three-flex>.child>.image.container.alt {
        filter: invert(.98) brightness(.5);
        -webkit-filter: invert(.98) brightness(.5);
        box-shadow: 0 8px 32px rgba(255, 255, 255, .3);
    }

    .example.three-flex>.child>.image.container:hover.alt {
        box-shadow: 0 8px 32px rgba(255, 255, 255, .5);
    }
}

.example.three-flex>.child>span {
    font-size: 1.2rem;
}

/* .example.three-flex>.child:first-of-type .image.container {
    background: url("../img/rs/IMG_2413@0.5x.jpg") no-repeat no-repeat;
    background-size: cover;
} */

.example.three-flex>.child:nth-of-type(2) .image.container {
    background: url("../img/rs/2023-01-01_3840x1920_HDR_VLog-0001.webp") no-repeat no-repeat;
    background-size: cover;
}

.example.three-flex>.child:nth-of-type(3) .image.container {
    background: url("../img/sign-img.webp") no-repeat no-repeat;
    background-size: cover;
    background-position-y: 90%;
}

body {
    text-align: center;
}

.colored.wrapper {
    padding-top: 4rem;
    padding-bottom: 4rem;
    background: rgba(98, 127, 236, .04);
    /* transform: translateY(-18%); */
}

@media only screen and (max-width: 720px) {
    .example.three-flex>.child>.image.container {
        border-radius: .7rem;
    }
}