.duet {
    --duet-color: var(--pink);
    --subtitle-color: var(--duet-color);

    .button {
        --accent: var(--duet-color);
    }

    &.is-green {
        --duet-color: var(--green);
    }

    &.is-blue {
        --duet-color: var(--blue);
    }

    &.is-red {
        --duet-color: var(--red);
    }

    &.is-purple {
        --duet-color: var(--purple);
    }

    &.is-cyan {
        --duet-color: var(--cyan);
    }

    &.is-testimonials {
        text-align: center;
    }

    &.is-items {
        background-color: var(--duet-color);
    }
}

.duet-image {
    display: flex;

    img {
        object-fit: cover;
    }

    &.is-half-height {
        height: 50%;
    }
}

.duet-content {
    padding: var(--section-padding);
}

.duet-item {
    display: flex;
    align-items: center;
    justify-content: center;

    &.is-cover {
        background-color: var(--black);
        background-size: cover;
        background-position: center;
        min-height: 50vh;
    }

    &.is-content {
        background-color: rgb(255 255 255 / 90%);
    }

    .content {
        padding: var(--section-padding);
    }
}

@media screen and (max-width: 999px) {
    .duet {
        text-align: center;
    }

    .duet-body {
        padding: var(--section-padding);

        .buttons {
            justify-content: center;
        }
    }

    .duet-item {

        .buttons {
            justify-content: center;
        }
    }

    .duet-image {
        /*aspect-ratio: 3 / 2;*/
    }
}


@media screen and (min-width: 1000px) {
    .duet {
        margin-top: var(--section-padding);

        &.is-horizontal,
        &.is-horizontal-alt {
            display: grid;
            grid-template-columns: 1fr 1fr;
        }

        &.is-horizontal-alt {
            .duet-body {
                order: 2;
            }
        }

        &.is-items {
            margin-top: 0;
            display: flex;
            align-items: stretch;

            .duet-item {
                width: 50%;
            }

            &:nth-child(even) {
                .duet-item.is-cover {
                    order: 2;
                }
            }
        }
    }
}

.duet-body {
    padding: 0 var(--section-padding);
}