.how-vpn-works {
    #your-connection-is-more {
        max-width: 830px;
    }

    #without-vpn {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        background: #fff url("../images/pink-orange-gradient-Ru2PY_1.svg") no-repeat;
        background-size: cover;
        border-radius: 16px;
        border: 0.5px solid #DEDEDE;
        margin: 1rem 1rem 0 1rem;

        padding: 40px 26px 30px 26px;

        @media screen and (min-width: 876px) {
            background: #fff url("../images/pink-orange-gradient-lg-I8ps7Tz.svg") no-repeat;
            background-size: cover;
            padding: 72px;
        }

        h3 {
            font-weight: 900;
        }

        picture,
        img {
            max-width: 1272px;
            width: 100%;
            height: auto;
        }

        ul {
            li:before {
                background: url("../images/red-cross-yx-MRHF.svg") no-repeat;
            }
        }
    }

    #with-vpn {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        background: #fff url("../images/blue-yellow-gradient-5-hT-if.svg") no-repeat;
        background-size: cover;

        border-radius: 16px;
        padding: 24px 16px 70px 16px;
        border: 0.5px solid #DEDEDE;

        margin: 0 1rem 1rem 1rem;

        @media screen and (min-width: 876px) {
            background: #fff url("../images/blue-yellow-gradient-lg-nESo1k_.svg") no-repeat;
            background-size: cover;
            padding: 72px;
        }

        img {
            margin-left: -1rem;
            margin-right: -1rem;
            width: auto;
            height: auto;
        }

        h3 {
            font-weight: 900;
        }

        ul {
            li:before {
                background: url("../images/green-check-223M_jX.svg") no-repeat;
            }
        }

    }

    #without-vpn,
    #with-vpn {
        box-shadow: 3px 25px 90px rgba(0, 0, 0, 0.15);

        ul {
            list-style: none;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            gap: 8px;
            justify-content: center;
            align-items: center;

            li:before {
                content: "";
                display: inline-block;
                width: 16px;
                height: 16px;
            }

            li {
                display: flex;
                align-items: center;
                gap: 2px;
                font-size: 14px;
                line-height: normal;
                font-weight: 500;
            }
        }
    }

    #openvpn {
        padding: 24px 20px;
    }

    #wireguard {
        padding: 24px 20px;
    }
}