/* commons  */

main {
    display: flex;
    flex-direction: column;
}

/* Hero - section 1  */
.hero-container {
    display: flex;
    gap: 24px;
    justify-content: start;
    align-items: stretch;
    flex: 1;

    .hero-card {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: start;
        border-radius: 15px;
        padding: var(--spacer-60);

        .content {
            width: 100%;
            min-height: 192px;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: start;
        }

        &.left {
            min-width: 55.55%;
            width: 100%;
            flex-grow: 1;
            background: linear-gradient(180deg, #3C3B3B 0%, #1B1B1B 100%);
            color: var(--text-white);

            .content {
                margin-top: 8px;
            }

        }

        &.right {
            width: 100%;
            flex-grow: 1;
            border: var(--border-light-blue);
            background: var(--section-gradient);
            color: var(--text-black-secondary);

            .content {
                margin-top: 8px;

                a {
                    .cta-secondary__text {
                        color: var(--text-black-primary);
                    }
                }
            }

            .cta-primary-container {
                background: transparent;
            }
        }
    }

    @media screen and (max-width: 1024px) {
        & {
            gap: 20px;

            .hero-card {
                border-radius: 12px;
                padding: 24px;

                .content {
                    min-height: auto;
                    gap: 24px;
                }
            }
        }
    }
}

/* latest insights - Section 2  */
.latest-insights {
    position: relative;
    height: auto;
    padding: 60px 100px;
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 50px;
    border: var(--border-light-blue);
    border-radius: 20px;
    background: var(--section-gradient);
    margin-bottom: var(--spacer-120);

    .triangle_graphic {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
    }

    .left-content {
        max-width: 390px;
        width: 100%;
        height: auto;

        .para-primary {
            margin-top: 8px;
        }
    }

    .right-content {
        max-width: 625px;
        width: 100%;
        height: auto;
    }

    @media screen and (max-width: 1024px) {
        & {
            flex-direction: column;
            gap: 32px;
            padding: 40px 20px;
            margin-block: var(--spacer-60);
        }
    }
}