JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <div class="swiper-slide" style="--image: url(https://www.alphatrad.com/sites/alphatrad.com/files/translation_services_freiburg_germany.jpg);">
    <p class="trend__city">Фрайбург</p>
    <p class="trend__country">Германия</p>
  </div>
  <div class="swiper-slide" style="--image: url(https://i.ibb.co/xXR04C1/image.jpg;">
    <p class="trend__city">Каш</p>
    <p class="trend__country">Турция</p>
  </div>
</div>

CSS

.wrapper {
  display: flex;
  margin: 0 -20px;
  padding: 20px;
  background-color: red;
}

.swiper-slide {
  width: calc(50% - 40px);
  background: linear-gradient(360deg, rgba(18, 24, 42, 0.6) 0%, rgba(18, 24, 42, 0) 83.2%), var(--image) center center no-repeat;
  margin: 0 20px;
  border-radius: 8px;
  padding: 12px;
  padding-top: 20%;
}

p {
  color: #fff;
}