/** wm-video-section **/

.who-section {
    position: relative;
    padding: 100px 60px 120px;
    background: #ffffff;
}

.who-container {
    max-width: 1250px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 585px 420px;
    align-items: center;
    justify-content: center;

    gap: 70px;

    transform: none;
}

.who-text {
    text-align: center;

    max-width: 585px;

    justify-self: end;
}

.who-video-wrap {
    position: relative;

    justify-self: start;
}

.who-text h3 {
    font-size: 26px;
    margin-bottom: 28px;
}

.who-text p {
    font-size: 20px;
    line-height: 1.45;
    color: #1a1a1a;
    margin-bottom: 28px;
}

.video-box {
    width: 100%;
    max-width: 420px;

    aspect-ratio: 9 / 16;

    margin: 0 auto;

    background: #000000;

    border-radius: 34px;

    overflow: hidden;
}

.video-box video {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;
}

.video-sticker {
    position: absolute;
    top: -190px;
    right: -150px;

    width: 280px;

    z-index: 5;
}

/* MEDIA QUERY */

@media only screen and (min-width: 1201px) and (max-width: 1450px) {

    .who-section {
        padding-left: 90px;
        padding-right: 90px;
    }

    .who-container {
        max-width: 1000px;

        grid-template-columns: 560px 300px;

        gap: 55px;

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

        transform: none;
    }

    .who-text {
        max-width: 560px;
        align-self: center;
    }

    .who-video-wrap {
        align-self: center;
        justify-self: center;
        position: relative;
    }

    .video-box {
        width: 300px;
        max-width: 300px;
    }

    .video-sticker {
        width: 185px;
        right: -95px;
        top: -125px;
    }
}

/* Small laptop / large tablet landscape */

@media only screen and (min-width: 992px) and (max-width: 1200px) {

    .who-section {
        padding-left: 90px;
        padding-right: 90px;
    }
    
    .who-container {
        max-width: 1000px;

        grid-template-columns: 540px 300px;

        gap: 40px;

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

        transform: none;
    }

    .who-text {
        max-width: 520px;
        justify-self: center;
        align-self: center;
        text-align: center;
    }

    .who-video-wrap {
        justify-self: center;
        align-self: center;

        margin-top: 0;
        transform: none;
        position: relative;
    }

    .video-box {
        width: 300px;
        max-width: 300px;
    }

    .video-sticker {
        width: 185px;
        right: -95px;
        top: -125px;
    }
}

@media only screen and (max-width: 991px) {
    
    .who-section {
        padding: 90px 40px 110px;
    }

    .who-container {
        max-width: 760px;
        margin: 0 auto;

        grid-template-columns: 1fr;

        gap: 55px;

        transform: translateX(0);
    }

    .who-text {
        max-width: 680px;

        margin: 0 auto;

        text-align: center;

        justify-self: center;
    }

    .who-video-wrap {
        justify-self: center;

        transform: translateX(0);
        position: relative;
    }

    .video-box {
        width: 300px;
        max-width: 300px;

        aspect-ratio: 9 / 16;

        margin: 0 auto;

        border-radius: 30px;
    }

    .video-box video {
        width: 100%;
        height: 100%;

        object-fit: cover;
    }

    .video-sticker {
        width: 135px;
        right: -45px;
        top: -108px;
    }
}

@media only screen and (max-width: 767px) {

    .who-text p {
        font-size: 17px;
    }
}

/* SMALL MOBILE */

@media only screen and (max-width: 600px) {
    
    .who-section {
        padding-left: 24px;
        padding-right: 24px;
    }

    .who-container {
        max-width: 100%;
        transform: translateX(0);
    }

    .who-text {
        max-width: 100%;
        text-align: center;
    }

    .who-video-wrap {
        width: 300px;
        margin: 0 auto;

        display: block;
        position: relative;
    }

    .video-box {
        width: 300px;
        max-width: 300px;

        margin: 0 auto;
    }

    .video-sticker {
        width: 135px !important;

        top: -108px !important;
        left: 210px !important;
        right: auto !important;
    }

    .video-box video {
        width: 100%;
        height: 100%;

        object-fit: cover;
    }
}

/* VERY SMALL MOBILE */

@media only screen and (max-width: 480px) {

    .who-text {
        max-width: 330px;
        margin: 0 auto;
    }

    .who-video-wrap {
        width: 240px !important;
        margin: 0 auto !important;

        display: block !important;
        position: relative !important;
    }

    .video-box {
        width: 240px !important;
        max-width: 240px !important;

        aspect-ratio: 9 / 16;

        margin: 0 auto;
    }

    .video-box video {
        width: 100%;
        height: 100%;

        object-fit: cover;
    }

    .video-sticker {
        width: 135px !important;
    
        top: -108px !important;
        left: 155px !important;
        right: auto !important;
    }
}