Как расширить div за пределы контейнера родительского списка без JavaScript

Question

Я пытаюсь создать страницу «О нас» для клиентского веб-сайта и, по сути, хотел бы создать всплывающий мод, который заполняет область просмотра браузера с пробелом в 2рем.Этот модал будет содержать фотографию сотрудника, имя, биографию и образование.Я ищу чисто CSS решение этой проблемы.Изображения сотрудников, которые вы нажимаете для отображения модальности, являются элементами списка неупорядоченного списка, заполненного php.Проблема, с которой я сталкиваюсь, заключается в том, чтобы получить модальное расширение за пределы <ul>Ниже приведен каркас того, что я пытаюсь выполнить.

Я пробовал некоторые решения из аналогичных вопросов (перечисленных ниже), но они не помогли мнепроблема. Расширить дочерний div за пределы контейнера div Расширить DIV за родительский элемент списка

Это разметка, которую я использую:

div {
  &.container {
    >div {
      &.container {
        &.whoWeAre {
          margin: 0;
          padding: 0;
          list-style: none;
          >ul {
            &.whoWeAre {
              width: 100%;
              margin: 0;
              padding: 0 0 0 1rem;
              position: relative;
              clear: both;
              list-style-type: none;
              display: inline-block;
              @media only screen and (min-width: 75em) {
                padding: 0;
              }
              >input {
                &.dossierToggle {
                  position: absolute;
                  left: -4000px;
                  top: -4000px;
                  &:checked {
                    ~li {
                      position: absolute;
                      width: 100vw;
                      height: 100vh;
                      margin: 2rem;
                      >div {}
                    }
                  }
                }
              }
              >li {
                box-sizing: border-box;
                width: 100%;
                padding: 0;
                position: relative;
                background-color: #FFFFFF;
                border: none;
                line-height: 2.2rem;
                text-align: left;
                float: left;
                margin-bottom: 1rem;
                animation: slide-in-blurred-left 0.5s cubic-bezier(0.165, 0.840, 0.440, 1.000) both;
                @media only screen and (min-width: 75em) {
                  width: calc(25% - 2rem);
                  height: 33rem;
                  margin-bottom: 2rem;
                  margin-right: 1rem;
                  margin-left: 1rem;
                  border: 1px solid $faint-grey;
                  background: orange;
                }
                >label {
                  width: 100%;
                  height: 100%;
                  display: block;
                  position: relative;
                }
              }
            }
          }
        }
      }
    }
  }
}

<div class="container">
  <h2>who we are</h2>
  <h6>meet our pastors</h6>
  <div class="container whoWeAre">
    <ul class="whoWeAre">
      <?php
				$sql = "SELECT * FROM staff WHERE flc='1' and pastor='1' ORDER BY `positionRank`";
				$query = $connection->query( $sql );
				if ( $query->num_rows > 0 ) {
					while ( $row = $query->fetch_assoc() ) {
				?>
        <input type="checkbox" class="dossierToggle" id="toggle<?php echo $row[ " nameFirst " ] . $row[ "nameLast " ]; ?>">
        <li>
          <label for="toggle<?php echo $row[ " nameFirst " ] . $row[ "nameLast " ]; ?>"></label>
          <div></div>
        </li>
        <?php } } ?>
    </ul>
  </div>
</div>