Img+Story+Product

1 + 2 WIDE

1+2 WIDE

HTML
<section
  class="v-tmpl v-tmpl--img-text-1"
  style="margin-bottom: 48px"
>
  <h2 class="v-truncate v-title">1+2 WIDE</h2>

  <script type="module">
    if (!window.customElements.get("swiper-container")) {
      import("/ui/lib/swiper/swiper-element-customized-bundle.min.js");
    }
  </script>

  <swiper-container
    space-between="8"
    slides-per-view="1"
    slides-per-group="1"
    navigation="true"
    pagination="true"
    class="v-carousel v-carousel--wide v-media_aspect_default"
  >
    <swiper-slide>
      <div class="v-banner-product">
        <div class="v-banner-product__banner">
          <!-- 이미지/기획전/동영상(텍스트-밖) -->
          <div class="v-media-banner v-media-banner--wide">
            <div class="v-media-banner__media">
              <a href="#">
                <div class="v-media-embed v-media-embed--cover">
                  <img class="v-media-embed__element v-media-embed__image" src="/dummy/images/s3/goods/org/328/250225061574328.jpg?RS=350&amp;SP=1" alt="" width="375" height="562">
                </div>
              </a>
            </div>
            <div class="v-media-banner__content">
              <a href="#" class="v-media-banner__link">
                <div class="v-media-banner__text">
                  <div class="v-media-banner__header">
                    <div class="v-font-bold v-truncate v-media-banner__small-title">BRAND NAME BRAND NAME BRAND NAME BRAND NAME BRAND NAME BRAND NAME BRAND NAME BRAND NAME BRAND NAME BRAND NAME BRAND NAME</div>
                    <div class="v-font-black v-line-clamp-4 v-media-banner__name">THIS IS A HEADLINE THIS IS A HEADLINE THIS IS A HEADLINE THIS IS A HEADLINE THIS IS A HEADLINE THIS IS A HEADLINE THIS IS A HEADLINE THIS IS A HEADLINE THIS IS A HEADLINE THIS IS A HEADLINE</div>
                  </div>

                  <div class="v-font-regular v-line-clamp-3 v-media-banner__sub-name">This is the subheadline copy This is the subheadline copy This is the subheadline copy This is the subheadline copy This is the subheadline copy This is the subheadline copy This is the subheadline copy This is the subheadline copy This is the subheadline copy This is the subheadline copy This is the subheadline copy This is the subheadline copy This is the subheadline copy This is the subheadline copy This is the subheadline copy This is the subheadline copy This is the subheadline copy This is the subheadline copy This is the subheadline copy This is the subheadline copy This is the subheadline copy This is the subheadline copy This is the subheadline copy This is the subheadline copy</div>
                </div>
              </a>
              <a href="#" class="v-button v-button--outlined v-button--full v-media-banner__button"><span class="v-button__text">LEARN MORE LEARN MORE LEARN MORE LEARN MORE LEARN MORE LEARN MORE LEARN MORE LEARN MORE LEARN MORE LEARN MORE LEARN MORE</span></a>
            </div>
          </div>
          <!-- /이미지/기획전/동영상(텍스트-밖) -->
        </div>
        <div class="v-banner-product__products">
          <ul role="list" class="v-item-list v-item-list_col_2 v-side-margin">
            <li>
              <!-- 상품 유닛 -->
            </li>
            <li>
              <!-- 상품 유닛 -->
            </li>
          </ul>
        </div>
      </div>
    </swiper-slide>
    <!-- … -->
  </swiper-container>
</section>