<!-- Products -->
        @{
            var productsTitle = Model.Value<string>("productsTitle");

            // Profichat
            var profichatImage = Model.Value<MediaWithCrops>("profichatImage")?.Url() ?? "/images/fallback.png";
            var profichatTitle = Model.Value<string>("profichatTitle") ?? "Profichat.net";
            var profichatDescription = Model.Value<string>("profichatDescription") ?? "";
            var profichatButtonText = Model.Value<string>("profichatButtonText") ?? "Подробнее";
            var profichatButtonLink = Model.Value<IEnumerable<Link>>("profichatButtonLink")?.FirstOrDefault()?.Url ?? "#";

            // ZMenu
            var zmenuImage = Model.Value<MediaWithCrops>("zmenuImage")?.Url() ?? "/images/fallback.png";
            var zmenuTitle = Model.Value<string>("zmenuTitle") ?? "ZMenu.net";
            var zmenuDescription = Model.Value<string>("zmenuDescription") ?? "";
            var zmenuButtonText = Model.Value<string>("zmenuButtonText");
            var zmenuButtonLink = Model.Value<IEnumerable<Link>>("zmenuButtonLink")?.FirstOrDefault()?.Url ?? "#";

            // Mekashron
            var mekashronImage = Model.Value<MediaWithCrops>("mekashronImage")?.Url() ?? "/images/fallback.png";
            var mekashronTitle = Model.Value<string>("mekashronTitle") ?? "Mekashron CRM";
            var mekashronDescription = Model.Value<string>("mekashronDescription") ?? "";
            var mekashronPrimaryText = Model.Value<string>("mekashronPrimaryButtonText");
            var mekashronSecondaryText = Model.Value<string>("mekashronSecondaryButtonText");
            var mekashronSecondaryLink =
            Model.Value<IEnumerable<Link>>("mekashronSecondaryButtonLink")?.FirstOrDefault()?.Url ?? "#";

            var lang = CultureInfo.CurrentCulture.TwoLetterISOLanguageName;
            var mekashronPrimaryLink = $"/downloadpage/{lang}";
        }

        <section class="products">
            <div class="container">
                <h2>@productsTitle</h2>
                <ul class="products__list">

                    <li class="">
                        <img src="@profichatImage" alt="@profichatTitle" />
                        <div class="content">
                            <h3>@profichatTitle</h3>
                            <p>@Html.Raw(profichatDescription)</p>
                            <div class="buttons">
                                <a href="@profichatButtonLink" class="button button--dark">@profichatButtonText</a>
                            </div>
                        </div>
                    </li>

                    <li class="">
                        <img src="@zmenuImage" alt="@zmenuTitle" />
                        <div class="content">
                            <h3>@zmenuTitle</h3>
                            <p>@Html.Raw(zmenuDescription)</p>
                            <div class="buttons">
                                <a href="@zmenuButtonLink" class="button button--dark">@zmenuButtonText</a>
                            </div>
                        </div>
                    </li>

                    <li class="">
                        <img src="@mekashronImage" alt="@mekashronTitle" />
                        <div class="content">
                            <h3>@mekashronTitle</h3>
                            <p>@Html.Raw(mekashronDescription)</p>
                            <div class="buttons">
                                <a href="@mekashronPrimaryLink" class="button button--accent">@mekashronPrimaryText</a>
                                <a href="@mekashronSecondaryLink" class="link">@mekashronSecondaryText</a>
                            </div>
                        </div>
                    </li>

                </ul>
            </div>
        </section>

.products {
  position: relative;
}
.products__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}
@media (max-width: 1023px) {
  .products__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
}
@media (max-width: 767px) {
  .products__list {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
}
@media (max-width: 1023px) {
  .products__list li {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    min-height: 360px;
  }
}
@media (max-width: 767px) {
  .products__list li {
    width: 100%;
    max-width: 400px;
  }
}
.products__list,
.products .swiper-wrapper {
  padding-bottom: 5px;
}
.products__list li,
.products .swiper-wrapper li {
  height: auto;
  -webkit-box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.25);
  box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.25);
  border-radius: var(--border-radius);
  overflow: hidden;
}
.products__list li img,
.products .swiper-wrapper li img {
  width: 100%;
  height: 155px;
}
.products__list li .content,
.products .swiper-wrapper li .content {
  padding: 15px 15px 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 11px;
}
.products__list li .buttons,
.products .swiper-wrapper li .buttons {
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}
.products .swiper-button-next,
.products .swiper-button-prev {
  display: none;
}