section.content-cards {
    padding: 3rem 0;
    width: 100%;
    max-width: 100%;
    max-width: 1220px;
    margin: 0 auto;
    padding: 0 1rem;

    article {
        display: flex;
        filter: drop-shadow(0px 1px 4px rgba(0, 0, 0, 0.25));
        background: #E9E3FD;
        background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(246, 243, 255, 1) 100%);
        padding: 20px 40px;
        gap: 24px;
        border-radius: 40px;
        margin-bottom: 2rem;

        div:first-child {
            width: 50%;
            h2,h3 {
                text-transform: none;
                text-align: left;
                font-weight: 700;
                font-size: clamp(28px, 5vw, 48px);
                line-height: 1.6;
                letter-spacing: -1px;
                padding: 0;
            }

            h3 {
                color: var(--primary-violet);
                font-weight: 500;
                font-size: clamp(22px, 4vw, 36px);
            }

            p {
                font-size: clamp(16px, 2.5vw, 24px);
                line-height: clamp(26px, 4vw, 38px);
                letter-spacing: -1px;
                color: var(--text-black);
                margin-bottom: 1.5rem;
            }

            p:last-child {
                margin: 0;
            }
        }

        div:last-child {
            width: 50%;
            max-width: 492px;

            img {
                width: 100%;
                height: auto;
                aspect-ratio: 492 / 443;
                object-fit: cover;
                object-position: top;
                filter: drop-shadow(0px 2px 8px rgba(0, 0, 0, 0.25));
                border-radius: 20px;
            }

            img#app-mobile {
                object-position: center 40%;
            }
        }
    }

    article:nth-child(2) {
        flex-direction: row-reverse;
    }
}

@media screen and (max-width: 900px) {
    section.content-cards {
        article {
            flex-direction: column;
            align-items: center;

            div:first-child,
            div:last-child {
                display: flex;
                flex-direction: column;
                justify-content: center;
                width: 100%;

                h2, h3 {
                    text-align: center;
                }

                p {
                    font-size: 18px;
                    margin-bottom: .6rem;
                    line-height: 1.6;
                }
            }
        }

        article:nth-child(2) {
            flex-direction: column;
        }
    }
}