var firstFourPosts = Model.Take(4).ToList();

@if (firstFourPosts.Any())
{
    <div id="Controls" class="carousel slide mobile-carousel m-auto rounded-3xl flex-row justify-center items-center" data-bs-ride="carousel">
        <div class="carousel-inner rounded-3xl overflow-hidden duration-200 drop-shadow-xl hover:drop-shadow-sm transform hover:translate-y-1" style="max-width:1070px;height:370px;">
            @for (var i = 0; i < firstFourPosts.Count; i++)
            {
                <div class="carousel-item w-100  @(i == 0 ? "active" : "")" style="">
                    <div class="absolute d-none d-md-block text-white m-3" style="filter: drop-shadow(2px 2px 10px rgba(0, 0, 0));">
                        <h5 class="md:text-4xl md:mt-36 md:ml-24">@PostController.Truncate(firstFourPosts[i].Title, 20)</h5>
                        <p class="text-xl md:ml-24">@firstFourPosts[i].CreatedAt.ToString("MMMM dd, yyyy")</p>
                    </div>
                    <a class="text-decoration-none text-dark justify-content-center object-fit-cover" href="@Url.Action("Details", "Post", new { id = @firstFourPosts[i].Id })" title="Details">
                        <img class="d-block img-fluid w-full" style="height:100%; object-fit: cover;" src="@firstFourPosts[i].Image">
                    </a>
                </div>
            }
        </div>
        <a class="carousel-control-prev scale-150 h-24 w-24 mt-16 md:mt-36" href="#Controls" role="button" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true" style="filter: drop-shadow(2px 2px 5px rgba(0, 0, 0));"></span>
        </a>
        <a class="carousel-control-next scale-150 h-24 w-24 mt-16 md:mt-36" href="#Controls" role="button" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true" style="filter: drop-shadow(2px 2px 5px rgba(0, 0, 0));"></span>
        </a>
    </div>
}