Section Image and Comment Box

index.cshtml

<section class="full-resim bg-white">
    @{
        int card123Col = 3;
        int card123sayi = 0;
        int card123CategoryOrderNumber = 3;

        if (Partial.isCategoryOrderNumber(card123CategoryOrderNumber))
        {
            IEnumerable<Category>
            card123Category = Partial.CategorySubOrderNumber(card123CategoryOrderNumber, lang);
            Category category123idno = Partial.Category(card123CategoryOrderNumber, lang);
            int card123Count = Convert.ToInt32(Math.Ceiling(card123Category.Count() / Convert.ToDouble(card123Col)));
            <div class="container">
                @for (int componen = 0; componen < 1; componen++)
                {
                <div class="row p-5">
                    @foreach (Category comCategory in card123Category.Skip(componen * card123Col).Take(card123Col))
                    {
                        if (card123sayi % 2 != 0)
                        {
                            <div class="col-md-4 p-2">
                                <p><span class="left-arrow hidden-xs hidden-sm"></span>@Partial.PostShortContent(comCategory.CategoryID, 156)</p>
                            </div>
                        }

                        <div class="col-md-8 p-2 margin-bottomEksi"><img src="@comCategory.CategoryThumbnail" class="resim-ortala"></div>

                        if (card123sayi % 2 == 0)
                        {
                            <div class="col-md-4 p-2">
                                <p><span class="right-arrow hidden-xs hidden-sm"></span>@Partial.PostShortContent(comCategory.CategoryID, 156)</p>
                            </div>
                        }
                        card123sayi++;
                    }
                </div>
                }
            </div>
        }
    }
</section>

Css

.full-resim p {
        background: rgba(0, 0, 99, .7);
        padding: 8px 30px;
        color: #FFFFFF;
        margin-top: 20%;
        font-family: 'Roboto Condensed', Merriweather, sans-serif;
    }
        .full-resim p span.right-arrow {
            left: -18px !important;
            position: absolute !important;
            width: 33px;
            height: 58px;
            border-style: solid;
            border-width: 29px 29px 33px 0 !important;
            border-color: transparent #4c4c91 transparent transparent;
            z-index: 1;
        }
        .full-resim p > span.left-arrow {
            right: -18px;
            position: absolute;
            width: 33px;
            height: 58px;
            border-style: solid;
            border-width: 29px 0 29px 33px;
            border-color: transparent transparent transparent #4c4c91;
            z-index: 1;
        }
    .resim-ortala {
        width: 100%;
        max-height: 400px;
        height: auto;
        object-fit: cover;
    }