.swiper-container {
    width: 100%;
    max-width: 1920px;  /* Match this to your site's maximum width */
    height: auto;
    margin: 0 auto;
}

/* Limit the slide height to a maximum of 300px on large screens */
.swiper-slide {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-height: 500px;  /* Set max height for larger screens */

}

/* Make the image fill the slide while respecting aspect ratio */
.carousel__image {
    max-width: 100%;
    height: auto;
    max-height: 300px;  /* Ensure the image doesn't exceed the slide's height */
    object-fit: cover;  /* This ensures the image covers the available space */
}

/* Content block styling */
.carousel__content {
    padding: 15px;
    max-height: 150px;  /* Set a max height for text content */
    overflow: hidden;   /* Hide overflowing content if it's too long */
}

/* Adjust height for smaller screens (mobile and tablet) */
@media (max-width: 768px) {
    .swiper-slide {
        height: auto; /* Let the height adjust automatically for smaller screens */
    }

    .carousel__image {
        max-height: none;  /* Remove the height restriction on smaller screens */
        height: auto;      /* Ensure images scale correctly */
    }

    .carousel__content {
        max-height: none;  /* Remove max-height restriction for the content on smaller screens */
        padding: 10px;     /* Adjust padding for smaller screens */
    }
}


.carousel__title {
    font-size: 1.5em;
    margin-bottom: 10px;
}

.carousel__text {
    margin-bottom: 10px;
}

.carousel__link {
    display: inline-block;
    background-color: #94ccbc;
    color: #fff;
    padding: 8px 15px;
    text-decoration: none;
}

.carousel__link:hover {
    background-color: #7bb1a0;
}