.elementor-widget-selling-points-widget {

    .selling-points-widget {
        padding-top: 145px;
        padding-bottom: 100px;
        padding-left: 111px;
        padding-right: 111px;

        position: relative;

        &:before {
            content: "";
            width: 80%;
            height: 75%;
            background: var(--Neutral-80);
            position: absolute;
            top: 0;
            left: -32px;
            border-radius: 12px;
            z-index: 0;
        }


        & .first-row {
            grid-auto-flow: column;

            & .left-column {
                z-index: 1;

                & h2 {
                    margin-bottom: 20px;
                }

                & .description {
                    margin-bottom: 48px;
                    max-width: 421px;
                }

                & .link-wrapper {
                    gap: 18px;
                    max-width: 240px;
                    margin-bottom: 105px;

                    & .btn.dark {
                        background-color: transparent;
                    }
                }
            }

            & .right-column {

                img {
                    float: right;
                    position: absolute;
                    top: 110px;
                    right: -30px;
                    z-index: 5;
                    max-width: unset;
                    width: clamp(300px, 100%, 537px) !important;
                }
            }
        }

        & .second-row {
            padding: 64px;
            border-radius: var(--map-rd-corner-lg);
            background: var(--Neutral-90);
            z-index: 10;
            position: relative;
            gap: 20px;


            & .selling-point-item {
                max-width: 200px;

                h3 {
                    line-height: 22px !important; 
                    margin-bottom: 16px; 
                }                    
            }

            /*if activated, the sm-menu is rendered */
            & .social-media-menu {

                & li.menu-item {
                    list-style-type: none;

                    & a {
                        color: inherit;
                    }
                }
            }
        }


    }

    /* the padding on mobile overlfows the first & second column when  grid-auto-columns: 1fr; is set.
    so we set it only on larger screens..*/
    @media screen and (min-width: 1240px) {
        .selling-points-widget {
            & .first-row {
                grid-auto-columns: 1fr;
            }
        }
    }

    /* 2 Elemnts breaking the grid, but only when screen is wide enough */
    @media screen and (max-width: 1311px) {
        .selling-points-widget {

            & .first-row {
                & .right-column {
                    img {
                        right: 0;
                        width: 45% !important;
                    }
                }
            }
        }
    }

    @media screen and (max-width: 1024px) {

        .selling-points-widget {
            & .second-row {
                grid-template-rows: 1fr 1fr;
            }
        }
    }

    @media screen and (max-width: 767px) {

        .selling-points-widget {
            padding: 64px 0 0 !important;

            &:before {
                border-radius: unset;
                height: 50%;
            }

            & .first-row {
                grid-auto-flow: row;

                & .right-column {
                    img {
                        position: relative;
                        top: unset;
                    }
                }

                & .left-column {
                    & .link-wrapper {
                        margin-bottom: 24px;
                    }
                }
            }

            & .second-row {
                grid-auto-flow: row;
                padding: 32px;

                margin-top: -33%;

                & .selling-point-item {
                    max-width: unset;
                }
            }
        }
    }
}

@media screen and (max-width: 767px) {

    .elementor-element:has(.elementor-widget-selling-points-widget) {
        padding-left: 0;
        padding-right: 0;

        & .selling-points-widget {
            &:before {
                content: "";
                width: 100%;
                height: 75%;
                background: var(--Neutral-80);
                position: absolute;
                top: 0;
                 left: 0;
                border-radius: 0;
                z-index: 0;
            }

            .first-row, .second-row {
                margin-left: 10px;
                margin-right: 10px;
            }

            & .right-column img {
                width: 100vw !important;
                left:-10px;
            }
        }
    }
}