.columns {

    &[data-color="#101830"],
    &[data-color="#202f77"],
    &[data-color="#080c18"] {
        .columns__list {
            .columns__item {
                border: 1px solid var(--blue);

                &[data-color="#fac864"] {
                    .columns__content {
                        background: rgba(250, 200, 100, 0.63);
                    }
                }

                #columns_wrapper {
                    color: #fff;

                    .columns__content {
                        color: #fff;

                        h3,
                        .columns__surtitre,
                        .columns__soustitre {
                            color: #fff;
                        }

                    }

                    ul li {
                        color: #fff;
                    }
                }
            }
        }

    }

    .columns__list {
        justify-content: center !important;
        gap: 40px;

        .columns__soustitre {
            color: var(--dark-blue1);
        }

        @media (max-width: 1399px) {
            .columns__item {
                margin-right: -15px;
                margin-left: -15px;
            }
        }

        .columns__item {
            border: 1px solid rgba(48, 72, 144, 0.33);
            border-radius: 16px;
            padding: 20px 20px 50px 20px;
            max-width: 400px;

            &[data-color="#5078f0"] {

                .columns__content {
                    background: rgba(80, 120, 240, 0.33);

                    &:after {
                        background: rgba(80, 120, 240, 0.33);
                    }
                }

                li {
                    &:before {
                        background-image: url(../../img/check_blue.svg);
                    }
                }
            }

            &[data-color="#a078f0"] {
                .columns__content {
                    background: rgba(160, 120, 240, 0.33);

                    &:after {
                        background: rgba(160, 120, 240, 0.33);
                    }
                }

                li {
                    &:before {
                        background-image: url(../../img/check_violet.svg);
                    }
                }
            }

            &[data-color="#fac864"] {
                .columns__content {
                    background: rgba(250, 200, 100, 0.33);

                    &:after {
                        background: rgba(250, 200, 100, 0.33);
                    }
                }

                li {
                    &:before {
                        background-image: url(../../img/check_yellow.svg);
                    }
                }
            }

            #columns_wrapper {
                height: 100%;
                display: flex;
                flex-direction: column;

                .columns__content {
                    border-radius: 8px;
                    padding: 30px 40px;
                    text-align: left;
                    display: flex;
                    flex-direction: column;
                    gap: 20px;
                    position: relative;
                    overflow: hidden;
                    min-height: 180px;

                    &:after {
                        content: '';
                        width: 240px;
                        height: 240px;
                        border-radius: 100%;
                        position: absolute;
                        top: 0;
                        right: 0;
                        transform: translate(33%, -45%);
                        z-index: -1;
                    }

                    .columns__surtitre {
                        font-size: 12px;
                        line-height: 16px;
                        text-transform: uppercase;
                        font-weight: var(--bold);
                    }

                    h3 {
                        margin: 0px;
                        color: var(--dark-blue2);
                    }

                    p {
                        margin: 0;
                        color: var(--dark-blue1);
                    }
                }

                p {
                    font-weight: var(--light);
                    color: var(--dark-blue1);
                    margin: 30px 20px 10px;
                    text-align: left;
                }

                ul {
                    text-align: left;
                    margin: 30px 20px 0px 0px;

                    li {
                        margin-bottom: 15px !important;
                        font-weight: var(--light);
                        color: var(--dark-blue1);

                        &:before {
                            content: '';
                            width: 17px;
                            height: 17px;
                            background-repeat: no-repeat;
                            background-color: transparent !important;
                            background-position: center;
                            background-size: contain;
                            margin: -2px 7px 0 -25px !important;
                        }
                    }

                    +p {
                        border-top: 1px solid rgba(16, 24, 48, 0.10);
                        padding-top: 20px;
                        margin: 5px auto 40px auto;
                        font-weight: var(--light);
                        color: var(--dark-blue1);
                        width: fit-content;
                    }
                }

                span.bouton {
                    margin: auto auto 0 auto;
                    width: fit-content;
                }
            }
        }
    }
}