.intro {
    --subtitle-color: rgb(255 255 255 / 80%);
    --title-color: var(--white);
    background-color: var(--blue);
    color: rgb(255 255 255 / 90%);
    position: relative;
}

.intro-body {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: var(--section-padding);
    padding: var(--section-padding);
    position: relative;

    &.is-duet {
        text-align: center;

        .buttons {
            justify-content: center;
        }
    }
}

.intro-background {
    background-image: url("/images/backgrounds/curve-light-6.jpg");
    /*background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.05)), url("../../images/backgrounds/curve-light-6.jpg");*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    bottom: 0;
    position: absolute;
    top: 0;
    width: 100%;
}


.intro.is-home {
    background-image: linear-gradient(
            180deg,
            #029ee9 0%,
            #019fea 17%
            #d23737 51%
            #000000 79%,
            #bd0404 100%
    );

    padding-bottom: 6rem;

    .content {
        max-width: 60rem;
    }

    .intro-body {
        align-items: start;
    }
}

.is-plain-text {
    .intro-body {
        text-align: center;
        justify-content: center;
    }
}

.intro.is-features {
    background-color: var(--purple);
}

.intro.is-case-studies {
    background-color: var(--violet-bis);
}

.intro.is-case-study {
    background-color: var(--pink);

    .intro-body {
        text-align: center;
        justify-content: center;
    }

    .intro-content {
        font-size: 1.125em;
        max-width: 64rem;
    }
}

.intro-content {
    flex-grow: 1;
    max-width: 32rem;
}

.intro-image {
    img {
        border-radius: 1em;
    }
}

@media screen and (max-width: 999px) {
    /*
    .intro-background {
     /* display: none;
    }
    */
}

@media screen and (min-width: 1000px) {
    .intro-body {
        &.is-duet {
            flex-direction: row;
            text-align: left;

            .intro-image {
                min-width: 32rem;
            }

            .buttons {
                justify-content: start;
            }
        }
    }
}