style.css

:root{ 
/* Colors */
/* Primary */
--very-dark-blue : hsl(233, 47%, 7%);
--dark-desaturated-blue: hsl(244, 38%, 16%);
--soft-violet: hsl(277, 64%, 61%);
--bg-light-violet: hsl(293deg, 42%, 35%, 0.24);

/* Neutral */

--white: hsl(0, 0%, 100%);
--slightly-transparent-whit: hsla(0, 0%, 100%, 0.75);
--slightly-transparent-white: hsla(0, 0%, 100%, 0.6);

/* font */
--font-family-inter: 'Inter', sans-serif;
--font-family-lexend: 'Lexend Deca', sans-serif;

font-size: 1em;
font-weight: 700;
}

*{
    box-sizing: border-box; 
    margin: 0;
    padding: 0;
}

body{
   
    min-height: 100vh;
    background-color: var(--very-dark-blue);
    font-family: var(--font-family-inter);
    color: var(--white);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}  
.stats-card{
    display: flex;
}
.stats-content{
    padding: 5.85em 7em 5.85em 5.85em;
    max-width: 570px;
    min-width: 300px;
    background-color: var(--dark-desaturated-blue);
    border-radius: 10px 0 0 10px;
    text-align: left; 
}

.stats-content span{
    color: var(--soft-violet);
}

.stats-content__paragraph p{
    line-height: 1.5em;
    margin-top: 1.875em ;
    margin-right: 2em;
    font-weight: 400;
    font-size: 0.9rem;
    color: var(--slightly-transparent-whit);
}

.stats-content__stats{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 4.375em 1.5625em 0 0;
    /* column-gap: 80px; */
}

.stats-content__stats p{
    font-family: var(--font-family-lexend);
    color:var(--slightly-transparent-white) ;
    font-weight: 400;
    font-size: 0.8rem;
    line-height: 1.9em;
    text-transform: uppercase;
}
/* estableces el ancho máximo de la imagen en el 100% del contenedor y la altura se ajusta automáticamente para mantener la relación de aspecto de la imagen. Con esto, 
la imagen se ajustará al ancho de 570px si el contenedor lo permite, pero se adaptará a tamaños más pequeños si es necesario, sin deformarse. */
.stats-image {
    width: 570px;
    min-width: 300px;
    max-width: 100%;
    height: auto;
    background: url(images/image-header-desktop.jpg);
    background-size: cover;
    border-radius: 0 10px 10px 0;
    overflow: hidden;
    position: relative; /* Add position relative */
    filter: saturate(1) blur(0.7px);
    
  }
  
  /* Add color overlay classes */
  .overlay {
    height: 100%;
    width: 100%;
    background: var(--soft-violet);
    mix-blend-mode: multiply;
    opacity: 0.9;
    
    
  }
  
  @media screen and (max-width: 768px) {
    .stats-card {
      flex-direction: column-reverse;
    }
  
    .stats-content {
      padding: 3em;
      border-radius: 10px;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }
  
    .stats-image {
      width: 100%;
      height: 200px;
      border-radius: 10px;
    }
  }

  @media only screen and (max-width: 625px) {
    :root{ 
        font-size: 0.75em;
    }
    .stats-card{
        flex-direction: column-reverse;
        margin: 0.625em;
        min-width: 200px;
    }
    .stats-content{
        padding: 3em 4.5em 3em 3em;
        padding: 0;
        padding: 3em 3em 0 3em;
        max-width: 300px;
        min-height: 200px;
        border-radius: 0 0 10px 10px;
        text-align: center;
    }

    .stats-image {
        height: 220px;
        max-width: 300px;
        border-radius: 10px 10px 0 0;
        background: url(images/image-header-mobile.jpg) no-repeat;
        background-size: contain;
        
      }
    .stats-content__stats{
        flex-direction: column;
        margin: 1.875em 0 0 0;
        
    }

    .stats-content__stats p{
        margin-bottom: 1.875em;
    }
    .stats-content__paragraph p{
        line-height: 1.5em;
        margin-top: 1.875em ;
        margin-right: 0;
        font-weight: 400;
        font-size:0.825em;
        color: var(--slightly-transparent-whit);
    }
      
  }