.border-gradient {
    border: 10px solid;
    border-image-slice: 1;
    border-width: 3px;
  }
  
    
  * { box-sizing: border-box;}
  body { padding: 0; margin: 0;}
  .border-gradient-purple {
    border-image-source: linear-gradient(to left, #743ad5, #d53a9d);
  }
  .scrollHalf { position: relative}
  /*.scrollHalf__grupo { opacity: calc(1/(1+(var(--visible-y)*var(--visible-y)*var(--visible-y)*var(--visible-y)))); transition: all 200ms ease-in-out;}*/
  
  
  .scrollHalf__grupo {  transition: all 200ms ease-in-out; }
  .scrollHalf__grupo__imagen { overflow: hidden; }
  .scrollHalf__grupo__contenido { padding: 3rem;}
  
  
  .scrollHalf__grupo[data-scroll="out"] { opacity: 0;}
  .scrollHalf__grupo[data-scroll="in"] { opacity: calc(var(--visible-y)*1.9);  }  
  
  
  @media screen and (min-width:900px) {
    .scrollHalf__grupo { min-height: 100vh;}
    .scrollHalf__grupo__imagen { position: fixed; top: 0; left: 0; width: 50vw;}
    .scrollHalf__grupo__imagen img {  min-height: 100vh;  min-width: 50vw; }
    .scrollHalf__grupo__contenido { margin: 0 3vw 0 52vw;}
  }
  
  
  .images
  {
      width: 250px;
      margin-top: 10px; 
      margin-bottom: 100px;
      position: relative;
  }
  
  .content h4
  {
      margin-top: 20px;
  }
  
  .content p
  {
      margin-top: 50px;
  }
  
  .first h3
  {
      text-align: center;
  }
  
  .right-border
  {
      border-right: 1px solid #f5f5f5;
  }
  
  /* Extra small devices (phones, 600px and down) */
  @media only screen and (max-width: 600px) {
      
  
      .images{
          left: 20px;
          top: 100px;
      }
  
      .content {
          text-align: center;
      }
      .bottom-section
   {
      width: 100%;
      height:84%;
   
   }
   
  }
  
  /* Small devices (portrait tablets and large phones, 600px and up) */
  @media only screen and (min-width: 600px) {
     
  
      .images{
          left: -2000px;
      }
  
      .content{
          text-align: center;
      }
  
      .bottom-section
   {
      width: 100%;
      height:100%;
   
   }
  }
  
  /* Medium devices (landscape tablets, 768px and up) */
  @media only screen and (min-width: 768px) {
     
  
      .images{
          left: 100px;
          top: 100px;
      }
  
      .content{
          text-align: center;
      }
  
      
   .bottom-section
   {
      width: 100%;
      height:85.5%;
   
   }
  
   .content h4 {
       margin-top: 50px;
   }
  
   
  
  }
  
  /* Large devices (laptops/desktops, 992px and up) */
  @media only screen and (min-width: 992px) {
      .btn
      {
          left: 200px;
      }
  
      .images{
          left: 300px;
      }
  
      .images1
      {
          left: 80px;
          width: 100px;
      }
  
      .images{
          left: 0px;
          top: -10px;
      }
  
      .content{
          text-align: center;
      }
  
      .bottom-section
   {
      width: 273px;
      height:85.5%;
   
   }
  }