.background-section {
    background-image: url('../img/home/home_slider_04.webp'); /* Cambia esto por la ruta de tu imagen */
    background-size: cover; /* Asegura que la imagen cubra toda la sección */
    background-position: center; /* Centra la imagen */
    height: 100vh; /* Altura de la sección (puedes ajustar según lo que necesites) */
    color: white; /* Color del texto, cambia según tu preferencia */
    display: flex; /* Usamos flexbox para centrar el contenido */
    justify-content: center; /* Centrar horizontalmente */
    align-items: center; /* Centrar verticalmente */
    text-align: center; /* Alinear el texto al centro */
}


.responsive-container {
    width: 100%;
    max-width: 400px;
    height: 200px;
    position: relative;
    overflow: hidden;
    border-radius: 10px; /* Opcional: bordes redondeados */
  }

  .responsive-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Asegura que la imagen se recorte proporcionalmente */
    object-position: center; /* Centra la imagen si se recorta */
  }