[hideprofile]

[html]<style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600&family=Onest:wght@400;500&display=swap');
@font-face { font-family: 'TAN Memories'; src: url('ССЫЛКА_НА_ШРИФТ.woff2') format('woff2'); font-style: italic; font-display: swap }
.guest { box-sizing: border-box; max-width: 950px; margin: 0 auto; padding: 16px; font: 12px/185% 'Onest', sans-serif; color: #485966; text-transform: lowercase }
.guest * { box-sizing: border-box }
.guest s { color: #93A3B0 }
.guest-cover { position: relative; height: 130px; overflow: hidden; border-radius: 16px }
.guest-cover img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center }
.guest-glass { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); min-width: 240px; padding: 10px 30px; border-radius: 14px; background: rgba(238,241,242,.45); backdrop-filter: blur(7px); text-align: center }
.guest-glass b { display: block; font: italic 500 24px/1.1 'TAN Memories', 'Times New Roman', serif; color: #7A263D }
.guest-glass span { display: block; margin-top: 3px; font-size: 8px; letter-spacing: 2px; color: #71859A }
.guest-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 22px 0 }
.guest-facts span { padding: 6px 15px; border-radius: 20px; background: rgba(122,38,61,.08); font-size: 11px; color: #7A263D }
.guest-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px }
.guest-card { display: flex; flex-direction: column; min-width: 0; padding: 20px; border-radius: 14px; background: #fff; box-shadow: 0 6px 20px rgba(72,89,102,.07); overflow-wrap: break-word }
.guest-card img { display: block; width: 100%; aspect-ratio: 16/9; margin-bottom: 18px; border-radius: 10px; object-fit: contain }
.guest-card h3 { margin: 0 0 12px; font: 600 13px/140% 'Manrope', sans-serif; color: #7A263D; text-align: center }
.guest-card p { margin: 0; font-size: 11px; line-height: 185% }
.guest-card i { display: block; margin-top: auto; padding-top: 16px; font-size: 11px; line-height: 185%; color: #7A263D }
</style>

<div class="guest">

<div class="guest-cover">
<img src="https://forumstatic.ru/files/001c/c1/ef/44239.png">
<div class="guest-glass"><b>гостевая</b><span>вопросы • заявки</span></div>
</div>

<div class="guest-facts"><span>мистика</span><span>США</span><span>горы, небольшой городок</span><span>21+</span></div>

<div class="guest-grid">

<div class="guest-card">
<h3>Здрасте!</h3>
<p>Кто-то скажет, что насмотрелись сериалов и вдохновились, другие решат, что мы лишь очередной проект, который увидит русфф. Не можем отрицать ни то, ни другое, но у нас есть идея и чем дольше мы ее думаем, тем больше хотим ее поиграть. А вот где именно ее поиграть так и не нашли…</p>
<i>Так что вдруг найдется еще парочка отчаянных, готовых рискнуть на целую новую мистичку ради <s>сомнительного</s> сюжета?</i>
<img src="https://upforme.ru/uploads/001c/c1/ef/4/t42333.png">
</div>

<div class="guest-card">
<h3>Короче, какие у нас карты?</h3>
<p>Типа кодер, типа тамада и типа текстовик ищут соучастников. Не готовы подписываться на серьезных щах? Пойдем с нами по приколу! Говорят, что иногда с таким настроем выходит даже лучше.</p>
<i>Естессно, сюжет мы вам расскажем, но не сразу…</i>
<img src="https://upforme.ru/uploads/001c/c1/ef/4/t95576.png">
</div>

<div class="guest-card">
<h3>Но намекнуть всегда пжалуста!</h3>
<p>Допустим нам нравятся горы, чистый воздух и небольшие городки. Допустим, что в подобных городках всегда есть свои правила и никто не любит, когда их нарушают. Но людям же обычно море по колено, верно? Вот только цена своего самовара в чужом доме порой слишком высока. Уйдешь вот в горы и не вернешься. А может вернешься, но уже совершенно другим.</p>
<i>Ну так что? Го? <s>Я про админку, а не про горы, если вдруг что.</s></i>
<img src="https://upforme.ru/uploads/001c/c1/ef/4/t547848.png">
</div>

</div>
</div>

<script>
(function () {
  var fit = function () { if (window.setHeight) window.setHeight() };
  if (document.fonts && document.fonts.ready) document.fonts.ready.then(fit);
  window.addEventListener('load', fit);
  [100, 400, 1000, 2500].forEach(function (t) { setTimeout(fit, t) });
})();
</script>
[/html]