[hideprofile][html]<style>
    .capsule-container {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        justify-content: left;
        font-family: Verdana, Geneva, sans-serif;
    }

    .capsule {
        background: #1e1e1e; /* Цвет плашки */
        overflow: hidden;
        width: 180px;
        height: 250px;
        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: 150px;
        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 КОНТЕЙНЕР -->
     <!--  ССЫЛКУ ВМЕСТО # -->
        <div class="capsule">
            <div class="capsule-image-container">
                <img src="https://i.pinimg.com/736x/0c/87/04/0c87044ae145847294f6dd26dcadc8d8.jpg" style="top: 0px;">
            </div>
            <div class="capsule-content">
                <div class="capsule-title"><a href="#" class="capsule-link">Феникс\original</a></div>
                <p class="capsule-text">Лидер "Перехода", бывший "Ангел".<p><a href="https://i.pinimg.com/736x/e6/61/e3/e661e3f84ac981124f1db3d1f0262656.jpg">1</a>, <a href="https://i.pinimg.com/736x/6d/0e/ac/6d0eacbb59194a496b148d45fa4b4ec9.jpg">2</a>, <a href="https://i.pinimg.com/736x/ea/71/cf/ea71cfbcf221f06e3b8e8525539d8a8c.jpg">3</a>, <a href="https://i.pinimg.com/736x/38/1d/e5/381de5b8991febf2751ec4e5b6777858.jpg">4</a></p></p>
            </div>
        </div>
   

    <!--  2 КОНТЕЙНЕР -->
    <!--  ССЫЛКУ ВМЕСТО # -->
        <div class="capsule">
            <div class="capsule-image-container">
                <img src="https://i.pinimg.com/736x/07/fb/34/07fb3452c4640d881a16d08c2e314f3e.jpg" style="top: 0px;">
            </div>
            <div class="capsule-content">
                   <div class="capsule-title"><a href="#" class="capsule-link">Имя\внешность</a></div>
                <p class="capsule-text">Описание</p>
            </div>
        </div>
   

    <!--  3 КОНТЕЙНЕР -->
     <!--  ССЫЛКУ ВМЕСТО # -->
        <div class="capsule">
            <div class="capsule-image-container">
                <img src="https://i.pinimg.com/736x/07/fb/34/07fb3452c4640d881a16d08c2e314f3e.jpg" style="top: 0px;">
            </div>
            <div class="capsule-content">
                               <div class="capsule-title"><a href="#" class="capsule-link">Имя\внешность</a></div>
                <p class="capsule-text">Описание</p>
            </div>
        </div>
   

    <!--  4 КОНТЕЙНЕР -->
     <!--  ССЫЛКУ ВМЕСТО # -->
        <div class="capsule">
            <div class="capsule-image-container">
                <img src="https://i.pinimg.com/736x/07/fb/34/07fb3452c4640d881a16d08c2e314f3e.jpg" style="top: 0px;">
            </div>
            <div class="capsule-content">
                                <div class="capsule-title"><a href="#" class="capsule-link">Имя\внешность</a></div>
                <p class="capsule-text">Описание</p>
            </div>
        </div>
   

    <!--  5 КОНТЕЙНЕР -->
        <!--  ССЫЛКУ ВМЕСТО # -->
        <div class="capsule">
            <div class="capsule-image-container">
                <img src="https://i.pinimg.com/736x/07/fb/34/07fb3452c4640d881a16d08c2e314f3e.jpg">
            </div>
            <div class="capsule-content">
                            <div class="capsule-title"> <a href="#" class="capsule-link">Имя\внешность</a></div>
                <p class="capsule-text">Описание</p>
            </div>
        </div>
   

    <!--  5 КОНТЕЙНЕР -->
        <!--  ССЫЛКУ ВМЕСТО # -->
        <div class="capsule">
            <div class="capsule-image-container">
                <img src="https://i.pinimg.com/736x/07/fb/34/07fb3452c4640d881a16d08c2e314f3e.jpg">
            </div>
            <div class="capsule-content">
                            <div class="capsule-title"><a href="#" class="capsule-link"> Имя\внешность</a></div>
                <p class="capsule-text">Описание</p>
            </div>
        </div>
   
</div>
[/html]