Внимание, полиция!
[html]<style>
    .capsule-container {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        justify-content: center;
        font-family: Verdana, Geneva, sans-serif;
    }

    .capsule {
        background: #1e1e1e; /* Цвет плашки */
        border-radius: 30px;
        overflow: hidden;
        width: 200px;
        height: 400px;
        text-align: center;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
        position: relative;
    }

    .capsule:hover {
        transform: scale(1.05);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.8);
    }

    .capsule-image-container {   
        width: 100%;
        height: 200px;
        position: relative;
        overflow: hidden;
    }

    .capsule-image-container img {
        position: absolute;
        width: 100%;
        height: auto;
        top: 0px;
        left: 0px;
        transition: top 0.3s ease;
    }

    .capsule-content {
        padding: 15px;
    }

    .capsule-title {
        font-size: 1.3rem;
        font-weight: bold;
        margin-bottom: 5px;
        color: #619c8e; /* Цвет заголовка */
    }

    .capsule-text {
        font-size: 1rem;
        color: #ccc; /* Цвет текста капсула */
        max-height: 110px;
        overflow: auto;
        padding-right: 10px;
        font-weight: normal;
    }

    .capsule-link {
        text-decoration: none;
        color: inherit;
    }
</style>

<div class="capsule-container">
    <!-- 1 КОНТЕЙНЕР -->
    <a href="#" class="capsule-link"> <!--  ССЫЛКУ ВМЕСТО # -->
        <div class="capsule">
            <div class="capsule-image-container">
                <img src="https://64.media.tumblr.com/2226e6f68bc9924e07bce8d5376a9d62/tumblr_inline_ogwmjnILFo1qlt39u_250.gifv" style="top: 0px;">
            </div>
            <div class="capsule-content">
                <div class="capsule-title"> Julian Carter</div>
                <p class="capsule-text"><i>Joseph Gordon-Levitt</i><br>
<i>детектив </i><br>С малых лет Джулиан проявлял интерес к разгадыванию головоломок и детективным историям, что в дальнейшем привело его к карьере в правоохранительных органах.
В его карьере было множество успешных расследований, но одно из них стало поворотным моментом в его жизни. В 2018 году Джулиан расследовал дело о серийном убийце, который терроризировал город. Долгие месяцы напряженной работы привели к аресту преступника, но это дело также оставило свой след на Джулиане. Он столкнулся с темным лицом человеческой натуры и осознал, что мир полон не только справедливости, но и жестокости.

После этого дела Джулиан стал более замкнутым и сосредоточенным. Он начал копаться в своих собственных переживаниях и страхах, что привело его к изучению криминальной психологии. Он стал не только детективом, но и человеком, который стремится понять мотивацию преступников. Это знание помогло ему в дальнейшем раскрытии более сложных дел, но также сделало его более уязвимым.
Теперь он столкнулся с новым вызовом - вирусом.</p>
            </div>
        </div>
    </a>

    <!--  2 КОНТЕЙНЕР -->
    <a href="#" class="capsule-link"> <!--  ССЫЛКУ ВМЕСТО # -->
        <div class="capsule">
            <div class="capsule-image-container">
                <img src="https://upforme.ru/uploads/001c/00/4d/20/694136.gif" style="top: 0px;">
            </div>
            <div class="capsule-content">
                <div class="capsule-title">Tina Sparks</div>
                <p class="capsule-text"><i>nina dobrev</i><br>
<i>судмедэксперт</i><br>Она стала известна благодаря своему вниманию к деталям и способности выявлять даже самые незначительные улики, которые могли стать ключевыми в расследованиях. Тина искренне стремилась помочь тем, кто потерял своих близких. Она часто проводила время с семьями жертв, объясняя им результаты экспертиз и помогая справиться с горем. Её чуткость и человечность сделали её не только уважаемым экспертом, но и другом для многих.
В 2025 году Тина столкнулась с одним из самых сложных дел в своей карьере - необычным вирусом.</p>
            </div>
        </div>
    </a>

    <!--  3 КОНТЕЙНЕР -->
    <a href="#" class="capsule-link"> <!--  ССЫЛКУ ВМЕСТО # -->
        <div class="capsule">
            <div class="capsule-image-container">
                <img src="https://64.media.tumblr.com/9a1d731ce06133eb31f89fdcee2b772b/69e926f111532dc8-a1/s400x600/50607183e74704b5aa07f15fa6b2acf056e046b2.gifv" style="top: 0px;">
            </div>
            <div class="capsule-content">
                <div class="capsule-title">Greg Reynolds</div>
                <p class="capsule-text"><i>michael fassbender</i><br>
<i>начальник полицейского управления</i><br>С годами Грег поднялся по карьерной лестнице и стал детективом, а затем — начальником отдела расследований. Его репутация как бескомпромиссного и справедливого офицера полиции привела к тому, что в 2020 году он был назначен начальником полицейского управления. Под его руководством управление стало более открытым и доступным для граждан. Грег внедрял различные инициативы, направленные на взаимодействие с местным населением, включая программы по профилактике преступности и содействию молодежи.
В личной жизни Грег тоже имел свои испытания. Он потерял свою жену из-за, что сильно сказалось на его эмоциональном состоянии. </p>
            </div>
        </div>
    </a>
<!--  4 КОНТЕЙНЕР -->
    <a href="#" class="capsule-link"> <!--  ССЫЛКУ ВМЕСТО # -->
        <div class="capsule">
            <div class="capsule-image-container">
                <img src="https://i.pinimg.com/736x/e5/42/d8/e542d8188e43e1a3c15ab8f9b91beab0.jpg" style="top: 0px;">
            </div>
            <div class="capsule-content">
                <div class="capsule-title">Та Самая</div>
                <p class="capsule-text">Девушка Сына Маминой Подруги. Мало того, что вскружила голову антагонисту Нику, так она ещё и азиатка! Трыньк на своём гуцине и европейское сердечко щелк, башка катится прочь.</p>
            </div>
        </div>
    </a>

    <!--  5 КОНТЕЙНЕР -->
    <a href="#" class="capsule-link">     <!--  ССЫЛКУ ВМЕСТО # -->
        <div class="capsule">
            <div class="capsule-image-container">
                <img src="https://i.pinimg.com/736x/13/96/e2/1396e2c1df80ea48040a0ed65cee2966.jpg">
            </div>
            <div class="capsule-content">
                <div class="capsule-title">Сын Маминой Подруги</div>
                <p class="capsule-text">Тот самый, да-да! И обязательно блондин! Неподкупное добро, которому не надо никаких красавиц, но на которого они конечно вешаются. Согласен, бесит...</p>
            </div>
        </div>
    </a>
   
</div>
[/html]