#club-clarins-smile-2023 a#ds_hydra{
        position: relative;
        z-index: 1;
    }
    #club-clarins-smile-2023 #ds_hydra.clarins-club-highlight__new-bonus{
        margin-top: 15%;
    }

    #club-clarins-smile-2023 #ds_hydra.clarins-club-highlight__new-bonus .highlighted-bonus-point .popup-button {
        position: absolute;
        right: 5px;
        top: 5px;
        color: #000;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        font-size: 12px;
        cursor: pointer;
        background-color: #dbdce0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        transition: 500ms;
    }

    #club-clarins-smile-2023 #ds_hydra.clarins-club-highlight__new-bonus .highlighted-bonus-point .popup-button:hover {
        color: #fff;
        background-color: #bf1736;
    }

    #club-clarins-smile-2023 #ds_hydra.clarins-club-highlight__new-bonus .highlighted-bonus-point p.info-box {
        background-color: #dbdce0;
        color: #000;
        padding: 15px 18px;
        font-size: 11px;
        position: absolute;
        z-index: 10;
        top: -141%;
        width: 330px;
        left: -83px;
        border-radius: 5px;
        display: none;
    }

    #club-clarins-smile-2023 #ds_hydra.clarins-club-highlight__new-bonus .highlighted-bonus-point p.info-box.active {
        display: block;
    }

    #club-clarins-smile-2023 #ds_hydra.clarins-club-highlight__new-bonus {
        background-image: url(content/club-clarins-smile/img/hydra_right_background_ingredient_mobile.jpg?$staticlink$);
        background-position: center bottom;
        background-repeat: no-repeat;
        background-size: contain;
    }

/* custom query*/
@media (max-width: 320px) {
    #club-clarins-smile-2023 #ds_hydra.clarins-club-highlight__new-bonus .highlighted-bonus-point p.info-box {
        top: -200px;
        width: 300px;
        left: -50px;
        padding: 15px 0;
    }
 }
/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {
    #club-clarins-smile-2023 .highlighted-bonus-point::after {
        left: 38%;
    }

    #club-clarins-smile-2023 .highlighted-bonus-point {
        width: 45%;
    }

    #club-clarins-smile-2023 #ds_hydra.clarins-club-highlight__new-bonus .highlighted-bonus-point p.info-box {
        padding: 23px 0;
        top: -184%;
        width: 350px;
    }
 }
/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) { }
/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) { 
    #club-clarins-smile-2023 .highlighted-bonus-point {
        width: 80%;
    }

    #club-clarins-smile-2023 #ds_hydra.clarins-club-highlight__new-bonus {
        margin-top: 5%;
    }

    #club-clarins-smile-2023 #ds_hydra.clarins-club-highlight__new-bonus {
        background-image: url(content/club-clarins-smile/img/hydra_right_background_ingredient_desktop.jpg?$staticlink$);
        background-position: right;
        background-repeat: no-repeat;
        background-size: contain;
    }

    #club-clarins-smile-2023 #ds_hydra.clarins-club-highlight__new-bonus .new-header-bottom {
        justify-content: space-around;
    }
}
/* X-Large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) { }
/* XX-Large devices (larger desktops, 1400px and up)*/
@media (min-width: 1400px) { }
/* custom query for 14inch screen example => lenovo thinkpad */
@media (min-width: 80em) and (max-width: 80em){ }