[html]

<script>

var slider = createSlider();

</script>

<style>

.matchast {
    background-image: url(https://forumstatic.ru/files/001c/7b/1c/19813.png);
    background-repeat: no-repeat;
    width: 640px;
    height: 641px;
    background-size: contain;
    border-radius: 10px;
padding-top:75px;
}

.m-t-header {
    font-family: playfair display;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 700;
    line-height: 175%;
    letter-spacing: 0.04em;
    margin-bottom: 10px;
    text-align: center;
}

.matchast-sparkle {
    background: url(https://forumstatic.ru/files/001c/7b/1c/68582.png) no-repeat;
    background-size: contain;
    width: 93px;
    height: 65px;
    position: absolute;
    z-index: 5;
    margin-top: -47px;
    margin-left: 535px;
}

.mySlides {
    height: 480px;
}

.matchast-ins {
    width: 620px;
    height: 557px;
    background: var(--background-primary);
    margin: auto;
    border-radius: 10px;
}

.slideshow-container {
    max-width: 576px;
  position: relative;
  margin: auto;
    height: 490px;
}

.mySlides {
    height: 400px;
}

.mySlides {
  display: none;
}

.prev, .next {
  cursor: pointer;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

.prev img, .next img {
    height: 15.8px;
    width: 18px;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.match-text {
  position: absolute;
padding-top:22px;

}

.m-7-txt {
    text-align: justify;
    margin-top: 15px;
    max-height: 330px;
    overflow: auto;
    padding: 10px;
}

.dot {
  cursor: pointer;
  height: 8px;
  width: 8px;
  margin: 0 2px;
  background-color: #C1C1C1;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #5C5C5C;
}

.fade {
  animation-name: fade;
  animation-duration: 0.5s;
}

@keyframes fade {
  from {opacity: .8}
  to {opacity: 1}
}

</style>

<div style="justify-items: center;">

<div class="matchast religion-code"> <div class="matchast-sparkle"></div>

<div class="matchast-ins">

<div class="slideshow-container">

  <div class="mySlides fade">
    <div class="match-text"><div class="m-t-header">География</div>
<div class="m-t-image" style="background:url(https://forumstatic.ru/files/001c/7b/1c/17898.png); width:576px;height:60px;background-size:contain !important;"></div>
<div class="m-7-txt"> <span style="font-family: Playfair Display; font-weight: 700; font-size: 24px; font-style: italic;">Т</span><span style="font-family:inter; font-size:12px; line-height:140%;">едас — континент, где каждая долина и каждый город напоминает артефакт: он выточен историей, насыщен магией, культурой и кровью. <s>Ниже представлен географический обзор с детализацией ключевых регионов и их поселений.</s> <i>Штука с "Ниже" не прокатит, потому что у нас переключалка слайдов вправо-влево. Но суть не в этом. В первом блоке идет общее просто красивое вводное описание, сейчас для него текста мало. Предлагаю здесь словами визуализировать карту, вот как раз разделить территории на север, юг, восток, запад и мб кратко геополитическую ситуацию, кто где живет.</i></span>
</div>
</div>
  </div>

  <div class="mySlides fade">
<div class="match-text"><div class="m-t-header">Тевинтер</div>
<div class="m-t-image" style="background:url(https://forumstatic.ru/files/001c/7b/1c/17898.png); width:576px;height:60px;background-size:contain !important;"></div>
<div class="m-7-txt"><span style="font-family: Playfair Display; font-weight: 700; font-size: 24px; font-style: italic;">Т</span><span style="font-family:inter; font-size:12px; line-height:140%;">евинтер подобен древнему магическому сосуду, наполненному северными ветрами, южной пылью и морскими брызгами. Его границы — это живые шрамы истории: на западе простираются андерфелсские пустоши, на юге соседствуют Неварра и Свободные Марки, а восточные берега омываются водами у берегов Антивы.</span><br><br>

<span style="font-family:inter; font-size:12px; line-height:140%;"><b>Расположение:</b> Север Тедаса. Граничит с Андерфелсом на западе, Неваррой и Вольной Маркой на юге, Антивой на востоке. Омывается Морем Ноцен на севере.</span><br><br>

<span style="font-family:inter; font-size:12px; line-height:140%;"><b>Климат:</b> Преобладает влажный субтропический климат с жарким влажным летом и мягкой, но иногда снежной зимой. Магия оказывает заметное влияние на погоду.</span><br><br>

<span style="font-family:inter; font-size:12px; line-height:140%;"><b>Столица:</b> Минратос. столица, сердце империи, где дворцы, доки и хранилища пульсируют магической силой.
</span><br><br>

<span style="font-family:inter; font-size:12px; line-height:140%;"><b>Крупные города:</b><br>
<i>Прибрежные:</i> Азариель, Марнас Пелл, Вириантиум (культурный и академический центр), Неромениан (ключевой торговый узел на восток).<br>
<i>Континентальные:</i> Периванций, Маротиус, Солас, Вол Дорма, Нессум, Кайман Бри, Тревис.</span><br><br>

<span style="font-family:inter; font-size:12px; line-height:140%;"><b>Острова и спорные земли:</b><br>
<i>Сегерон:</i> Крупный тропический остров к северу от Тевинтера, яблоко раздора между Империей и косари.</span><br><br>

<span style="font-family:inter; font-size:12px; line-height:140%;"><b>Ландшафты:</b><br>
<i>Арлатанский лес:</i> Древние эльфийские руины, где дух прошлого всё ещё витает среди поваленных деревьев.<br>
<i>Венмарийские горы:</i> Горная цепь на северной границе.<br>
<i>Река Минранта:</i> Главная магическая и торговая артерия, связывающая Минратус с морем.<br>
<i>Глаза Ноцена:</i> Таинственные заливы и бухты на северном побережье.<br>
<i>Безмолвные Равнины:</i> Южная пустошь, пересеченная Имперским шоссе.<br>
<i>Валарианские поля:</i> Приморская равнина у подножия Высоких Просторов.<br>
<i>Высокие Просторы:</i>  Горное плато.<br>
<i>Сто Колонн:</i> Руины из «твердой пыли», каркас древней архитектуры.
</span><br><br>

</div>
</div>  </div>

  <div class="mySlides fade">
<div class="match-text"><div class="m-t-header">Сегерон</div>
<div class="m-t-image" style="background:url(https://forumstatic.ru/files/001c/7b/1c/17898.png); width:576px;height:60px;background-size:contain !important;"></div>
<div class="m-7-txt"><span style="font-family: Playfair Display; font-weight: 700; font-size: 24px; font-style: italic;">С</span><span style="font-family:inter; font-size:12px; line-height:140%;">егерон — как раскаленный уголь в ладонях моря: остров, что тлеет и вспыхивает в вечной борьбе за власть. Его тропики дышат густым зноем, а земля под ногами словно всегда готова к бою.</span></div>
</div>  </div>
</div>
<br>

<div style="text-align:center">
  <a class="prev" onclick="slider.plusSlides(-1, '.religion-code')"><img src="https://forumstatic.ru/files/001c/7b/1c/82158.svg"></a>
  <div class="dot active" onclick="slider.currentSlide(1, '.religion-code')"></div>
  <div class="dot" onclick="slider.currentSlide(2, '.religion-code')"></div>
  <div class="dot" onclick="slider.currentSlide(3, '.religion-code')"></div>
  <a class="next" onclick="slider.plusSlides(1, '.religion-code')"><img src="https://forumstatic.ru/files/001c/7b/1c/35005.svg"></a>
</div>

</div>

</div>

</div>

[/html]