[html]
<style>
  .academy-section {
    margin: 18px 0 28px;
  }

  .academy-cover {
    margin: 8px 0 14px;
    border: 1px solid var(--bord, #b8b8b8);
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  }
.academy-panel-img div:after {
    content: "";
    background: var(--accent);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 5px;
    transition: all .6s ease-in-out 0s;
    mix-blend-mode: multiply;
}

.academy-panel-img {
    position: relative;
}

.academy-panel-img span {
    position: absolute;
    z-index: 9;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    font-family: var(--sec-font);
    text-transform: uppercase;
    color: var(--bt-bg);
    font-size: 44px;
}
  .academy-cover img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16/5;
    object-fit: cover;
    background: var(--head) center/cover no-repeat;
  }
  .academy-cover figcaption {
    padding: 10px 14px 12px;
    color: var(--sec-text, #0e0c0b);
    font-family: var(--main-font, system-ui, sans-serif);
    background: linear-gradient(0deg, #fff 70%, rgba(255, 255, 255, 0.9));
    border-top: 1px solid var(--bord, #b8b8b8);
  }

.academy-tabs {
    display: grid;
    gap: 14px;
    align-items: start;
    grid-template-columns: 1fr;
    background: var(--htm-clr);
    padding: 20px;
    border-radius: 5px;
    border: 1px solid var(--bord);
}
  @media (min-width: 980px) {
    .academy-tabs {
      grid-template-columns: 320px 1fr;
    }
    .academy-tab-list {
      grid-column: 1;
    }
    .academy-tab-panels {
      grid-column: 2;
    }
  }

  .academy-tab-control {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  .academy-tab-list {
    display: grid;
    gap: 10px;
  }
.academy-tab-list label {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--bord);
    border-radius: 5px;
    background: var(--quote);
    color: var(--sec-text, #0e0c0b);
    font-family: var(--main-font);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: .3px;
    font-size: 13px;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease,
      box-shadow 0.2s ease, transform 0.06s;
}
  .academy-tab-list label:hover {
    background: rgba(201, 200, 200, 0.4);
  }
  .academy-tab-list label:active {
    transform: translateY(1px);
  }

  .academy-tabs
    > input:nth-of-type(1):checked
    ~ .academy-tab-list
    > label:nth-of-type(1),
  .academy-tabs
    > input:nth-of-type(2):checked
    ~ .academy-tab-list
    > label:nth-of-type(2),
  .academy-tabs
    > input:nth-of-type(3):checked
    ~ .academy-tab-list
    > label:nth-of-type(3),
  .academy-tabs
    > input:nth-of-type(4):checked
    ~ .academy-tab-list
    > label:nth-of-type(4),
  .academy-tabs
    > input:nth-of-type(5):checked
    ~ .academy-tab-list
    > label:nth-of-type(5),
  .academy-tabs
    > input:nth-of-type(6):checked
    ~ .academy-tab-list
    > label:nth-of-type(6),
  .academy-tabs
    > input:nth-of-type(7):checked
    ~ .academy-tab-list
    > label:nth-of-type(7),
  .academy-tabs
    > input:nth-of-type(8):checked
    ~ .academy-tab-list
    > label:nth-of-type(8),
  .academy-tabs
    > input:nth-of-type(9):checked
    ~ .academy-tab-list
    > label:nth-of-type(9),
  .academy-tabs
    > input:nth-of-type(10):checked
    ~ .academy-tab-list
    > label:nth-of-type(10) {
    background: var(--accent2);
    color: var(--bt-bg);
    border-color: var(--accent2);
  }

  .academy-tab-panels {
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow: visible;
  }
.academy-panel {
    display: none;
    border: 1px solid var(--bord);
    border-radius: 5px;
    background: var(--quote);
    overflow: hidden;
    font-family: var(--main-font);
}

  .academy-tabs
    > input:nth-of-type(1):checked
    ~ .academy-tab-panels
    > .academy-panel:nth-of-type(1),
  .academy-tabs
    > input:nth-of-type(2):checked
    ~ .academy-tab-panels
    > .academy-panel:nth-of-type(2),
  .academy-tabs
    > input:nth-of-type(3):checked
    ~ .academy-tab-panels
    > .academy-panel:nth-of-type(3),
  .academy-tabs
    > input:nth-of-type(4):checked
    ~ .academy-tab-panels
    > .academy-panel:nth-of-type(4),
  .academy-tabs
    > input:nth-of-type(5):checked
    ~ .academy-tab-panels
    > .academy-panel:nth-of-type(5),
  .academy-tabs
    > input:nth-of-type(6):checked
    ~ .academy-tab-panels
    > .academy-panel:nth-of-type(6),
  .academy-tabs
    > input:nth-of-type(7):checked
    ~ .academy-tab-panels
    > .academy-panel:nth-of-type(7),
  .academy-tabs
    > input:nth-of-type(8):checked
    ~ .academy-tab-panels
    > .academy-panel:nth-of-type(8),
  .academy-tabs
    > input:nth-of-type(9):checked
    ~ .academy-tab-panels
    > .academy-panel:nth-of-type(9),
  .academy-tabs
    > input:nth-of-type(10):checked
    ~ .academy-tab-panels
    > .academy-panel:nth-of-type(10) {
    display: block;
  }

  .academy-panel-header {
    position: relative;
    overflow: hidden;
    background: var(--base-bg2) center/cover no-repeat;
  }
.academy-panel-header img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16/7;
    object-fit: cover;
    filter: grayscale(1);
}
  .academy-panel-header::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0) 45%,
      rgba(0, 0, 0, 0.45) 100%
    );
  }
  .academy-panel-title {
    position: absolute;
    left: 16px;
    bottom: 10px;
    margin: 0;
    color: #fff;
    font-family: var(--sec-font, serif);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  }

.academy-panel-body {
    padding: 12px 16px 16px;
    background: var(--htm-clr);
    margin: 20px;
    border-radius: 5px;
    font-size: 13px;
}
  .academy-panel-body p {
    margin: 6px 0 10px;
    color: var(--text, #000);
    font-family: var(--main-font, system-ui, sans-serif);
  }
  .academy-list {
    padding-left: 20px;
    margin: 6px 0 4px;
  }
  .academy-list li {
    list-style: disc;
    margin: 4px 0;
  }

  @media (max-width: 640px) {
    .academy-panel-header img {
      aspect-ratio: 16/9;
    }
  }
</style>
<section id="main-building" class="academy-section">

  <div class="academy-tabs" role="tablist" aria-label="Разделы главного корпуса">
    <input
      type="radio"
      name="tabs-main"
      id="tab-main-1"
      class="academy-tab-control"
      checked
    />
    <input
      type="radio"
      name="tabs-main"
      id="tab-main-2"
      class="academy-tab-control"
    />
    <input
      type="radio"
      name="tabs-main"
      id="tab-main-3"
      class="academy-tab-control"
    />
    <input
      type="radio"
      name="tabs-main"
      id="tab-main-4"
      class="academy-tab-control"
    />
    <input
      type="radio"
      name="tabs-main"
      id="tab-main-5"
      class="academy-tab-control"
    />
    <input
      type="radio"
      name="tabs-main"
      id="tab-main-6"
      class="academy-tab-control"
    />

    <div class="academy-tab-list">
      <label for="tab-main-1"><span>Библиотека</span></label>
      <label for="tab-main-2"><span>Большой зал</span></label>
      <label for="tab-main-3"><span>Столовая и кухня</span></label>
      <label for="tab-main-4"><span>Спорткомплекс</span></label>
      <label for="tab-main-5"><span>Административный блок</span></label>
      <label for="tab-main-6"><span>Учебные аудитории</span></label>
    </div>

    <div class="academy-tab-panels">
      <article
        class="academy-panel"
        role="tabpanel"
        aria-labelledby="tab-main-1"
      >
        <header class="academy-panel-header">
          <div class="academy-panel-img"><div><img src="https://forumstatic.ru/files/001c/8d/fd/24675.png" alt="" /></div><span>Location Name</span></div>
          <h3 class="academy-panel-title">Библиотека</h3>
        </header>
        <div class="academy-panel-body">
          Библиотека находится в юго-восточном крыле и занимает все четыре
          этажа. Вход расположили в углу: посетителя там встречает гигантская
          каменная книга, развернутые страницы которой, словно вплавились в
          стену и заменили их собой. По нижним кромкам её страниц почти бесшумно
          скатывается созданная магией вода — самый громкий звук , который можно
          услышать в этом месте. Высокие полки из самой различной древесины
          тянутся к потолку и по ним скользят лестницы на рельсах, позволяя
          достать любую книгу. А по самому центру, вдоль залов вытянулись
          длинные читальные столы со светильниками и письменными
          принадлежностями. Здесь царит особая, мягкая тишина, будто сама
          библиотека слушает и бережёт покой тех, кто находится в поиске знаний.
          В её фондах хранятся не только учебники, но также редкие манускрипты и
          гримуары ведьм и фамильяров прошлых эпох. И если часть из них
          находится в открытом доступе, то другая располагается этажом ниже в
          закрытом архиве, доступном лишь по разрешению преподавателя.
        </div>
      </article>

      <article
        class="academy-panel"
        role="tabpanel"
        aria-labelledby="tab-main-2"
      >
        <header class="academy-panel-header">
          <div class="academy-panel-img"><div><img src="https://forumstatic.ru/files/001c/8d/fd/24675.png" alt="" /></div><span>Location Name</span></div>
          <h3 class="academy-panel-title">Большой зал</h3>
        </header>
        <div class="academy-panel-body">
          Большой зал расположен в юго-западной части корпуса и служит местом
          отдыха, собраний, праздников и торжеств. Под высоким куполом
          располагается широкая сцена на которой выступают преподаватели и
          студенты, а в иные дни опускается экран на котором показывают
          различные фильмы. Во время официальных приёмов здесь выступает
          директор, а в дни посвящения первокурсников именно в этом зале
          зажигают первые свечи — символ начала пути. В остальное время зал
          открыт для всех: можно просто посидеть на скамьях и стульях, слушая,
          как капли стучат по витражам, собираться компаниями или просто побыть
          в одиночестве.
        </div>
      </article>

      <article
        class="academy-panel"
        role="tabpanel"
        aria-labelledby="tab-main-3"
      >
        <header class="academy-panel-header">
          <div class="academy-panel-img"><div><img src="https://forumstatic.ru/files/001c/8d/fd/24675.png" alt="" /></div><span>Location Name</span></div>
          <h3 class="academy-panel-title">Столовая и кухня</h3>
        </header>
        <div class="academy-panel-body">
          Столовая и кухня занимают нижний этаж восточного крыла и выходят
          террасой в сад, где по весне распускаются цветы, а кроны дают приятную
          тень от яркого солнца. Здесь редко бывает пусто: днём — голоса, смех,
          споры, а ночью почти всегда найдётся кто-то, кто пришёл перекусить.
          Поговаривают, что пламя на кухне не гаснет с первого дня, и, судя по
          тому, что в столовой всегда найдётся что-нибудь тёплое, это чистая
          правда. Поваров немного, но готовят они с особым чувством, обеспечивая
          и разнообразие, и щедрость порций.
        </div>
      </article>

      <article
        class="academy-panel"
        role="tabpanel"
        aria-labelledby="tab-main-4"
      >
        <header class="academy-panel-header">
          <div class="academy-panel-img"><div><img src="https://forumstatic.ru/files/001c/8d/fd/24675.png" alt="" /></div><span>Location Name</span></div>
          <h3 class="academy-panel-title">Спорткомплекс</h3>
        </header>
        <div class="academy-panel-body">
          Спорткомплекс — современное пространство в северо-западной части
          здания. Здесь шум воды в бассейне смешивается с эхом шагов на беговой
          дорожке и звуками борьбы на ринге. В залах студенты проводят много
          времени, развивая выносливость и силу на разнообразных тренажёрах, как
          самостоятельно так и под присмотром тренеров. Здесь же фамильяры
          учатся лучшему контролю над своим звериным обликом. Рядом с залами и
          бассейном находится кабинет первой помощи и душевые с раздевалками,
          чтобы быстро восстановиться после нагрузки. По вечерам к бассейну
          нередко приходят не ради спорта, но чтобы спокойно поплавать,
          послушать тишину и посмотреть, как луна отражается в воде.
        </div>
      </article>

      <article
        class="academy-panel"
        role="tabpanel"
        aria-labelledby="tab-main-5"
      >
        <header class="academy-panel-header">
          <div class="academy-panel-img"><div><img src="https://forumstatic.ru/files/001c/8d/fd/24675.png" alt="" /></div><span>Location Name</span></div>
          <h3 class="academy-panel-title">Административный блок</h3>
        </header>
        <div class="academy-panel-body">
          Административный блок занимает южную часть Главного корпуса. Винтовая
          лестница вдоль стены поднимается до четвёртого этажа, где расположены
          деканат и кабинет директора. Директорат и деканаты работают почти
          круглые сутки: здесь решают учебные вопросы, распределяют миссии,
          координируют сотрудников Академии и следят за порядком. В приёмной
          висит старый девиз: «Тайна охраняет мир, знание — тех, кто в нём
          живёт.». На втором и третьем этажах — кабинеты преподавателей, они же
          их комнаты, каждая из которых несёт отпечаток хозяина: где-то это
          простор и свет с ароматом трав, где-то — полумрак с плотными
          портьерами и хаосом личных вещей. Первый этаж занимает
          административная служба, куда студенты приходят с любыми
          организационными вопросами и за поддержкой.
        </div>
      </article>

      <article
        class="academy-panel"
        role="tabpanel"
        aria-labelledby="tab-main-6"
      >
        <header class="academy-panel-header">
          <div class="academy-panel-img"><div><img src="https://forumstatic.ru/files/001c/8d/fd/24675.png" alt="" /></div><span>Location Name</span></div>
          <h3 class="academy-panel-title">Учебные аудитории</h3>
        </header>
        <div class="academy-panel-body">
          Учебные аудитории разбросаны по всему зданию, а их облик часто
          отражает предмет, который в них преподают: одни — залиты солнцем, а
          досками исчерчены формулами и рунами, другие — окутаны приглушённым
          светом, и на полу мерцают защитные круги. Где-то стоят ряды
          компьютеров, а где-то — портреты мыслителей и экономистов. У каждой
          аудитории свой характер, но в каждой — удобные столы и стулья,
          современное оборудование и преподаватели, готовые делиться знанием.
        </div>
      </article>
    </div>
  </div>
</section>
[/html]
[hideprofile]