しょーごさんの中級課題Exの 下層ページ の制作過程

<section class="page-media">
  <div class="page-media__body">
    <div class="page-media__body-inner" data-aos="fade-up" data-aos-delay="100">
      <h2 class="page-media__ttl">温泉付き客室</h2>
      <div class="page-media__txt-wrap">
        <p class="page-media__txt">温海の源泉かけ流し露天風呂付き客室になります。</p>
        <p class="page-media__txt">あなただけの上質な安らぎのひとときを。</p>
      </div>
      <div class="page-media__note-wrap">
        <p class="page-media__note">＊部屋数に限りがございます。</p>
        <p class="page-media__note">＊洗い場はないため、お体を先に大浴場でお流しになって頂く必要があります。</p>
      </div>
    </div>
    <div class="page-media__body-bg">
      <picture>
        <source srcset="../img/layout/common_bg00.webp 1x, ../img/layout/common_bg00@2x.webp 2x" type="image/webp" />
        <img class="page-media__body-bg-img" src="../img/layout/common_bg00.jpg" srcset="../img/layout/common_bg00@2x.jpg 2x" alt="" loading="lazy" />
      </picture>
    </div>
  </div>
  <figure class="page-media__picture" data-aos="fade">
    <picture>
      <source srcset="../img/room/page_media_picture00_room.webp 1x, ../img/room/page_media_picture00_room@2x.webp 2x" type="image/webp" />
      <img class="page-media__img" src="../img/room/page_media_picture00_room.jpg" srcset="../img/room/page_media_picture00_room@2x.jpg 2x" alt="room1" loading="lazy" />
    </picture>
  </figure>
</section><!-- /.page-media -->

/* ---------------------
共通
--------------------- */
.page-media {
  display: flex;
  position: relative;
  flex-direction: column;
}
@media screen and (min-width: 768px), print {
  .page-media {
    flex-direction: row;
    margin: 0;
  }
}

/* ボディ */
.page-media__body {
  position: relative;
  padding: 1.875rem 1.875rem 2.5rem;
}
@media screen and (min-width: 768px), print {
  .page-media__body {
    width: calc(813 / 1180 * 100%); ・・・①
    min-height: 23.8125rem;
    padding: 3.5625rem 3.8125rem;
  }
}

.page-media__body-inner {
  z-index: 1;
  position: relative;
}

/* タイトル */
.page-media__ttl {
  font-size: 1.5rem;
  line-height: 1.3333333333;
}

/* テキスト */
.page-media__txt-wrap {
  margin-top: 1.875rem;
}
@media screen and (min-width: 768px), print {
  .page-media__txt-wrap {
    margin-top: 2.5rem;
  }
}

/* 注釈 */
.page-media__note-wrap {
  margin-top: 1.875rem;
}
@media screen and (min-width: 768px), print {
  .page-media__note-wrap {
    margin-top: 2.5rem;
  }
}

.page-media__note {
  font-size: 0.875rem;
  line-height: 1.5;
}

/* body背景画像 */
.page-media__body-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.page-media__body-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* メディア画像 */
.page-media__picture {
  order: -1;
}
@media screen and (min-width: 768px), print {
  .page-media__picture {
    position: absolute;
    top: -3.5625rem;
    width: 44.4915254237%;
    height: 18.75rem;
  }
}

.page-media__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------------------
通常時
--------------------- */
@media screen and (min-width: 768px), print {
  .page-media:not(.page-media--reverse) .page-media__body {
    margin-left: auto; ・・・②
    padding-left: calc(238 / 1180 * 100%); ・・・①
  }
}
.page-media:not(.page-media--reverse) .page-media__picture {
  left: 0;
}

/* ---------------------
左右反転
--------------------- */
@media screen and (min-width: 768px), print {
  .page-media--reverse {
    flex-direction: row-reverse;
  }
}
@media screen and (min-width: 768px), print {
  .page-media--reverse .page-media__body {
    margin-right: auto;
    padding-right: calc(208 / 1180 * 100%); ・・・①
  }
}
.page-media--reverse .page-media__picture {
  right: 0;
}