<script src="https://adventori.com/lp/enabler/ADventori-2.0.0.js" crossorigin="anonymous" type="text/javascript"></script>
<link rel=stylesheet type="text/css" href="https://adventori.com/lp/enabler/ADventori-2.0.0.css">

<div id="container1">
  <h1>Without adaptText</h1><p>The text is not scaled</p>
  <div id="ADventori_myAd1">           
    <div id="ADventori_myContent1">
        <img id="ADventori_logo1" src="https://adventori.com/lp/enabler/templates/assets/logo_carre_vert.svg">                   
        <div id="ADventori_text1">Your Ad here</div>
    </div>
  </div>
</div>

<div id="container2">
  <h1>With adaptText and dimension</h1><p>The t​ext is cut because it does not fit entirely in the container, the "..." show it. </p>  
  <div id="ADventori_myAd2">           
    <div id="ADventori_myContent2">
        <img id="ADventori_logo2" src="https://adventori.com/lp/enabler/templates/assets/logo_carre_vert.svg">                   
        <div id="ADventori_text2">Your Ad here</div>
    </div>
  </div>
</div>

<div id="container3">
  <h1>With adaptText and dimension </h1><p>With adaptText and font reduction</p>  
  <div id="ADventori_myAd3">           
    <div id="ADventori_myContent3">
        <img id="ADventori_logo3" src="https://adventori.com/lp/enabler/templates/assets/logo_carre_vert.svg">                   
        <div id="ADventori_text3">Your Ad here</div>
    </div>
  </div>
</div>

#container1, #container2, #container3{ 
  margin-left: 25px;
  width: 300px;
  height: 400px;
  display:inline-block;
  position:relative;
}

h1{
  height: 30px;
  width: 300px;
  font-size: 15px;
  position: absolute;
  top: 5px;
  color: #114454;
}
p{
  width: 300px;
  font-size: 13px;
  top: 20px;
  color: #353535;
  position: absolute;
}


#ADventori_myAd1 *, #ADventori_myAd2 *, #ADventori_myAd3 *{
  box-sizing: border-box;
}
#ADventori_myAd1, #ADventori_myAd2, #ADventori_myAd3{
    margin-top: 80px;
    float: left;
    overflow: hidden;
    width: 300px;
    height: 250px;
    cursor:pointer;
    border: 1px solid black;
    background-color: #ffffff;
}
#ADventori_myContent1, #ADventori_myContent2, #ADventori_myContent3{
    position: relative;
    width: 100%;
    height: 100%;
    background-image : url(https://adventori.com/lp/enabler/templates/assets/bg-01.jpg)
}
#ADventori_myContent1::after, #ADventori_myContent2::after, #ADventori_myContent3::after{
    display: block;
    width: 300px;
    height: 250px;
    content: "";
    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0.3) 100%);
}
#ADventori_logo1, #ADventori_logo2, #ADventori_logo3{
    position:absolute;
    right: 0;
    left: 0;
    display: block;
    width: 60px;
    height: 60px;
    margin: auto;
}
#ADventori_text1,#ADventori_text2, #ADventori_text3{
/*mandatory styles for adaptText*/
    width: 270px;
    height: 150px;
    font-size: 22px;
    line-height: 25px;
/*******************************/
    position: absolute;
    top: 80px;
    left: 0px;
    right:0px;
    padding: 0 10px;
    margin:auto;
    text-align: center;
    color: #114454;
    background-color:#EC6A6D;
}