Пример вывода собственных тизеров

В примере выводятся 3 тизера. Вывод тизеров оптимизирован под десктопную и мобильную версию сайта.

main.css

.twint__item-img {
    width: 150px;
    height: 150px;
}
div[class$="-twint"] img {
    max-width: inherit;
    height: 150px;
    vertical-align: bottom;
}
div[class$="-twint"] {
	overflow: hidden;
    margin-bottom: 30px;
    display: block;
    width: 100%;
}
 
div[class$="-twint"] ul {
    margin: 20px 0;
}
 
div[class$="-twint"] ul li {
    overflow: hidden;
    min-height: 22px;
    list-style: none;
    padding: 0 0 7px 25px;
    position: relative;
    float: left;
    width: 25%;
    margin-right: 20px;
	list-style-type:none;
}
div[class$="-twint"] ul li:before {
    display: none;
}
div[class$="-twint"]  .twint__item-img {
    position: relative;
    margin-bottom: 7px;
}
div[class$="-twint"] li a {
    color: #010101;
	  font-weight: bold;
    font-size: 13px;
    line-height:18px; 
}
 
@media screen and (max-width: 760px) {
    div[class$="-twint"] ul {
        width: 100%;
        max-width: inherit;
    }
    div[class$="-twint"] ul li {
        padding: 10px 25px;
        float: none;
        width: fit-content;
        margin: 0 auto !important;
    }
    div[class$="-twint"] ul li > div, div[class$="-twint"] ul li a {
            display: block;
        text-align: center;
        max-width: 100%;
        max-height: 100%;
    }
    div[class$="-twint"]  img {
        max-width: 100%;
        height: auto;
        vertical-align: bottom;
        width: 100%;
        padding: 5px 0;
    }
    .twint__item-img { 
        margin: 0 auto
    }
}

        <!--noindex-->
        <div class="main-twint">
            <ul class="twint">
                <li class="twint__item">
                    <div class="twint__item-img">
                        <img src="https://example.com/018.jpg" width="150" height="95" alt="image1">                                    </div>
                    <a href="http://example.com" target="_blank" rel="nofollow">>Читать дальше…</a>
                </li>
                <li class="twint__item">
                    <div class="twint__item-img">
                        <img src="https://example.com/018.jpg" width="150" height="95" alt="image1">                                    </div>
                    <a href="http://example.com" target="_blank" rel="nofollow">>Читать дальше…</a>
                </li>
				                <li class="twint__item">
                    <div class="twint__item-img">
                        <img src="https://example.com/018.jpg" width="150" height="95" alt="image1">                                    </div>
                    <a href="http://example.com" target="_blank" rel="nofollow">>Читать дальше…</a>
                </li>
            </ul>
        </div> 
        <!--/noindex-->