#footer_promo {
    background: var(--purple); color: var(--black); overflow: auto;
}


#footer_promo .wrapper { display: flex; justify-content: space-between; flex-wrap: wrap; }

#footer_promo .wrapper>div {   width: 50%;   }
#footer_promo .wrapper>div:first-child { align-self:center;padding: 32px 0;}

#footer_promo .wrapper>div:first-child p { max-width: 22em; }

#didyouknow { display: flex; align-items:center; }
#didyouknow > picture {
  /*  background:rgba(255,0,255,0.25);*/
    width:calc(300px - 75px); min-width:calc(300px - 75px);
    width:212px; min-width:212px;

    height: 100%; position: relative; pointer-events: none;  user-select: none;  }
#didyouknow > picture img{ height: 300px;  height: 240px; width: 240px;position: absolute; bottom:0; left: 0;  /*height: 100%; width: 100%; object-fit: contain;*/}
#didyouknow > div {
    border-radius: 8px; background: white; box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.20); padding: 32px; max-width: 520px; margin: 60px 0 70px; margin: 48px 0;  min-height: 170px;
}

#didyouknow div h2{ font-size: 24px; }
#didyouknow div p:last-child{ margin-bottom: 0; }
#didyouknow div a {
    transition: all 0.2s ease; cursor: pointer;
    text-decoration: none; font-weight: 600;
    padding: 0 0;
    background-image: linear-gradient(currentColor, currentColor), linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));
    background-position: 0 100%, 0 100%;
    background-repeat: no-repeat, no-repeat;
    background-size: 0 1px, 100% 1px; background-size: 100% 1px, 100% 1px;
    transition: background-size .2s;

}

#didyouknow div a:hover {
    background-size: 100% 100%, 100% 100%; color: white; background-image: linear-gradient(var(--dark-purple), var(--dark-purple)), linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));

}
#didyouknow div a:focus-visible {box-shadow: 0 0 0 1px var(--dark-purple), 0 0 0 3px var(--orange); border-radius: 2px; }







@media all and (max-width: 1599px) {

}
@media all and (max-width: 1499px) {


}
@media all and (max-width: 1199px) {

    #didyouknow > picture {  width:calc(200px - 75px);   min-width:calc(200px - 75px);
        width:185px;   min-width:185px;
    }
    #didyouknow > picture img{ height:245px; height: 210px; width: 210px;   }


}
@media all and (max-width: 999px) {

    #didyouknow > picture {
        width:165px;   min-width:165px;
    }
    #didyouknow > picture img{ height:240px; height: 192px;   width: 192px;   }


}

@media all and (max-width: 899px) {

    #footer_promo .wrapper {    }

    #footer_promo .wrapper>div {   width: 100%;   }
    #footer_promo .wrapper>div:first-child { padding: 48px 0 0;}

/*    #didyouknow > picture { order: 10;  width:calc(240px);   min-width:calc(240px); transform: translateX(-40px)  }
    #didyouknow > picture img{ height:240px; width: 240px; left: auto; right: 0;  }*/
    #didyouknow > div { flex:1; margin: 40px 0 50px; }


}

@media all and (max-width:599px) {
    #footer_promo .wrapper>div:first-child { padding: 32px 0 0;}
/*    #didyouknow > picture { order: 10;  !* width:95px;   min-width:95px;transform:translateX(-20px) *!
        transform:none;  width:120px;   min-width:120px; }
    #didyouknow > picture img{ height:120px; width: 120px;  height:185px; width: 185px;  left: auto; right: 0;  transform:translateX(25px) }*/
    #didyouknow > div { flex: none;  padding: 16px 16px 32px;  width: 100%;  margin: 30px 0 0; }
    #didyouknow > picture { order: 10; width: 100%; height: 175px;}
    #didyouknow > picture img { left: 50%; transform: translateX(-50%); }
    #didyouknow { flex-direction: column; }
}