.rl-intro {
    position: relative;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    overflow: hidden;
    .intro {
        position: relative;
        padding: 128px 64px;
        box-sizing: border-box;
        background-image: url(../assets/images/intro_bg.jpg);
        background-position: 50% 70%;
        background-size: cover;
        overflow: hidden;
        .application {
            display: flex;
            flex-direction: column;
            gap: 36px;
            position: relative;
            z-index: 1;
            overflow: hidden;
            width: 45%;
            .app-name {
                display: flex;
                align-items: center;
                gap: 24px;
                img {
                    height: 64px;
                    border-radius: 8px;
                    -webkit-border-radius: 8px;
                }
                h1 {
                    color: var(--c-w);
                    font-size: 42px;
                    font-family: p300;
                    text-transform: capitalize;
                    text-shadow: 2px 2px 1px rgba(var(--c-bx), .24);
                }
            }
            p {
                color: var(--c-w);
                font-size: 24px;
                font-family: p200;
                text-shadow: 2px 2px 1px rgba(var(--c-bx), .24);
            }
            .app-download {
                display: flex;
                align-items: center;
                gap: 24px;
                flex-wrap: wrap;
                img {
                    height: 50px;
                    border-radius: 8px;
                    -webkit-border-radius: 8px;
                    &:hover {
                        cursor: pointer;
                    }
                }
            }
        }
        .intro-bg {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 0;
            background: linear-gradient(to right, rgba(186, 158, 67, .21), rgba(186, 158, 67, .42), #C99A10);
            width: 100%;
            height: 100%;
        }
    }
    img.intro-person {
        position: absolute;
        bottom: 0;
        right: 0;
        height: 125%;
    }
}

@media screen and (min-width: 0px) {
    .rl-intro {
        border-radius: 24px;
        -webkit-border-radius: 24px;
    }
    .rl-intro .intro {
        zoom: .5;
        padding: 48px 24px;
    }
    .rl-intro .intro .application {
        width: 100%;
    }
    .rl-intro img.intro-person {
        height: 90%;
    }
}
@media screen and (min-width: 360px) {
    .rl-intro img.intro-person {
        height: 100%;
    }
}
@media screen and (min-width: 576px) {
    .rl-intro {
        border-radius: 36px;
        -webkit-border-radius: 36px;
    }
    .rl-intro .intro {
        zoom: .7;
        padding: 72px 36px;
    }
}
@media screen and (min-width: 768px) {
}
@media screen and (min-width: 992px) {
    .rl-intro {
        border-radius: 50px;
        -webkit-border-radius: 50px;
    }
    .rl-intro .intro {
        zoom: .8;
        padding: 128px 64px;
    }
    .rl-intro .intro .application {
        width: 55%;
    }
    .rl-intro img.intro-person {
        height: 100%;
    }
}
@media screen and (min-width: 1200px) {
}
@media screen and (min-width: 1400px) {
}
@media screen and (min-width: 1600px) {
    .rl-intro .intro {
        zoom: 1;
    }
    .rl-intro img.intro-person {
        height: 100%;
    }
}