
.carousel {
  display: flex;
  flex-wrap: nowrap;
}

.carousel__item {
  flex-shrink: 0;
  margin-right: 2.5rem;
}

{# Styles #}
{% require_css %}
  <style>
    {% scope_css %}
      {% if bg_color %}
        .card {
          background-color: ;
          display: flex;
          flex-direction: column; /* Hace que los elementos internos se apilen verticalmente */
          height: auto; /* Asegura que la altura sea automática */
          padding: 1rem !important;
        }
      {% endif %}

      {% if title %}
        .testimonial__name {
          
        }
      {% endif %}

      {% if details %}
        .testimonial__meta {
          
        }
      {% endif %}

      {% if description %}
        .card__desc,
        .card__desc * {
          
        }
      {% endif %}

      .swiper {
        height: auto;
        padding-bottom: 40px;
        width: 100%;
      }

      .swiper-slide {
        height: auto; /* Asegura que la altura del slide sea automática */
        margin: 0 24px 0 0;
        width: calc(100% - 24px);
        display: flex;
        flex-direction: column; /* Asegura que los elementos internos se apilen verticalmente */
      }

      .swiper-slide:last-of-type {
        margin-right: 0;
      }

      .swiper-scrollbar-drag {
        background-color: var(--accent-primary);
      }

      .swiper-scrollbar {
        background-color: var(--light-secondary);
        bottom: 0;
      }

      .swiper-slide {
        --slide-width: 300px;
        width: var(--slide-width);
      }

      @media (min-width: 640px) {
        .swiper-slide {
          --slide-width: 400px;
        }
      {% for item in testimonials %}
        {% if loop.length == 2 %}
          .swiper-slide {
            --slide-width: calc(50% - 24px);
          }
        {% endif %}
      {% endfor %}
      }
    {% end_scope_css %}
  </style>
{% end_require_css %}
