<template>
  <div class="u-body u-xl-mode" data-lang="en">
    <section class="u-clearfix u-section-1" id="carousel_2beb">
      <div class="u-clearfix u-sheet u-valign-middle-lg u-sheet-1"
        ><!--product--><!--product_options_json-->
        <!--{"source":""}--><!--/product_options_json--><!--product_item-->
        <div class="u-container-style u-expanded-width u-product u-product-1">
          <div class="u-container-layout u-valign-top-md u-valign-top-sm u-valign-top-xs u-container-layout-1">
            <!--product_image-->
            <img
              alt=""
              class="u-image u-image-default u-product-control u-image-1"
              src="images/5660510982_7_1_16.jpg"
            />
            <!--/product_image-->
            <div
              class="u-align-left u-container-style u-expanded-width-md u-expanded-width-sm u-expanded-width-xs u-group u-shape-rectangle u-group-1"
            >
              <div class="u-container-layout u-valign-middle-lg u-valign-middle-xl u-container-layout-2">
                <!--product_title-->
                <h2 class="u-product-control u-text u-text-1">
                  <a class="u-product-title-link" href="#"
                    ><!--product_title_content-->Sample Product
                    <!--/product_title_content--></a
                  > </h2
                ><!--/product_title--><!--product_price-->
                <div class="u-product-control u-product-price u-product-price-1">
                  <div class="u-price-wrapper u-spacing-10"
                    ><!--product_old_price-->
                    <div class="u-hide-price u-old-price" style="text-decoration: line-through !important">
                      <!--product_old_price_content-->$12<!--/product_old_price_content--></div
                    ><!--/product_old_price-->
                    <!--product_regular_price-->
                    <div class="u-price u-text-palette-2-base" style="font-size: 1.5rem; font-weight: 700">
                      <!--product_regular_price_content-->$9.95<!--/product_regular_price_content--></div
                    >
                    <!--/product_regular_price-->
                  </div> </div
                ><!--/product_price-->
                <div class="u-border-3 u-border-grey-dark-1 u-line u-line-horizontal u-line-1"></div
                ><!--product_button-->
                <!--options_json--><!--{"clickType":"add-to-cart","content":""}--><!--/options_json-->
                <a
                  href="https://nicepage.com/c/architecture-building-website-templates"
                  class="u-black u-border-2 u-border-grey-75 u-btn u-button-style u-hover-grey-75 u-product-control u-btn-1"
                >
                  <!--product_button_content-->Add to Cart<!--/product_button_content--></a
                ><!--/product_button-->
                <!--product_button--><!--options_json--><!--{"clickType":"add-to-cart","content":"buy it now"}-->
                <!--/options_json-->
                <a
                  href="https://nicepage.com/templates"
                  class="u-border-2 u-border-black u-btn u-button-style u-hover-black u-none u-product-control u-text-black u-text-hover-white u-btn-2"
                >
                  <!--product_button_content-->buy it now<!--/product_button_content--></a
                ><!--/product_button-->
                <a
                  href="https://nicepage.com/joomla-templates"
                  class="u-btn u-button-style u-none u-text-body-color u-btn-3"
                  >Full Detail&nbsp;<span class="u-icon">
                    <svg class="u-svg-content" viewBox="0 0 512 512" x="0px" y="0px" style="width: 1em; height: 1em">
                      <g>
                        <g>
                          <path
                            d="M506.134,241.843c-0.006-0.006-0.011-0.013-0.018-0.019l-104.504-104c-7.829-7.791-20.492-7.762-28.285,0.068    c-7.792,7.829-7.762,20.492,0.067,28.284L443.558,236H20c-11.046,0-20,8.954-20,20c0,11.046,8.954,20,20,20h423.557    l-70.162,69.824c-7.829,7.792-7.859,20.455-0.067,28.284c7.793,7.831,20.457,7.858,28.285,0.068l104.504-104    c0.006-0.006,0.011-0.013,0.018-0.019C513.968,262.339,513.943,249.635,506.134,241.843z"
                          />
                        </g>
                      </g>
                    </svg>
                    <img
                  /></span>
                </a>
                <div class="u-social-icons u-spacing-40 u-social-icons-1">
                  <a class="u-social-url" target="_blank" href=""
                    ><span class="u-icon u-icon-circle u-social-facebook u-social-icon u-icon-2">
                      <svg class="u-svg-link" preserveAspectRatio="xMidYMin slice" viewBox="0 0 112 112" style="">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-bfbd" />
                      </svg>
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        xmlns:xlink="http://www.w3.org/1999/xlink"
                        version="1.1"
                        xml:space="preserve"
                        class="u-svg-content"
                        viewBox="0 0 112 112"
                        x="0px"
                        y="0px"
                        id="svg-bfbd"
                      >
                        <path
                          d="M75.5,28.8H65.4c-1.5,0-4,0.9-4,4.3v9.4h13.9l-1.5,15.8H61.4v45.1H42.8V58.3h-8.8V42.4h8.8V32.2 c0-7.4,3.4-18.8,18.8-18.8h13.8v15.4H75.5z"
                        />
                      </svg>
                    </span>
                  </a>
                  <a class="u-social-url" target="_blank" href=""
                    ><span class="u-icon u-icon-circle u-social-icon u-social-twitter u-icon-3">
                      <svg class="u-svg-link" preserveAspectRatio="xMidYMin slice" viewBox="0 0 112 112" style="">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-2dfc" />
                      </svg>
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        xmlns:xlink="http://www.w3.org/1999/xlink"
                        version="1.1"
                        xml:space="preserve"
                        class="u-svg-content"
                        viewBox="0 0 112 112"
                        x="0px"
                        y="0px"
                        id="svg-2dfc"
                      >
                        <path
                          d="M92.2,38.2c0,0.8,0,1.6,0,2.3c0,24.3-18.6,52.4-52.6,52.4c-10.6,0.1-20.2-2.9-28.5-8.2 c1.4,0.2,2.9,0.2,4.4,0.2c8.7,0,16.7-2.9,23-7.9c-8.1-0.2-14.9-5.5-17.3-12.8c1.1,0.2,2.4,0.2,3.4,0.2c1.6,0,3.3-0.2,4.8-0.7 c-8.4-1.6-14.9-9.2-14.9-18c0-0.2,0-0.2,0-0.2c2.5,1.4,5.4,2.2,8.4,2.3c-5-3.3-8.3-8.9-8.3-15.4c0-3.4,1-6.5,2.5-9.2 c9.1,11.1,22.7,18.5,38,19.2c-0.2-1.4-0.4-2.8-0.4-4.3c0.1-10,8.3-18.2,18.5-18.2c5.4,0,10.1,2.2,13.5,5.7c4.3-0.8,8.1-2.3,11.7-4.5 c-1.4,4.3-4.3,7.9-8.1,10.1c3.7-0.4,7.3-1.4,10.6-2.9C98.9,32.3,95.7,35.5,92.2,38.2z"
                        />
                      </svg>
                    </span>
                  </a>
                  <a class="u-social-url" target="_blank" href=""
                    ><span class="u-icon u-icon-circle u-social-icon u-social-instagram u-icon-4">
                      <svg class="u-svg-link" preserveAspectRatio="xMidYMin slice" viewBox="0 0 112 112" style="">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-8b43" />
                      </svg>
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        xmlns:xlink="http://www.w3.org/1999/xlink"
                        version="1.1"
                        xml:space="preserve"
                        class="u-svg-content"
                        viewBox="0 0 112 112"
                        x="0px"
                        y="0px"
                        id="svg-8b43"
                      >
                        <path
                          d="M55.9,32.9c-12.8,0-23.2,10.4-23.2,23.2s10.4,23.2,23.2,23.2s23.2-10.4,23.2-23.2S68.7,32.9,55.9,32.9z M55.9,69.4c-7.4,0-13.3-6-13.3-13.3c-0.1-7.4,6-13.3,13.3-13.3s13.3,6,13.3,13.3C69.3,63.5,63.3,69.4,55.9,69.4z"
                        />
                        <path
                          d="M79.7,26.8c-3,0-5.4,2.5-5.4,5.4s2.5,5.4,5.4,5.4c3,0,5.4-2.5,5.4-5.4S82.7,26.8,79.7,26.8z"
                        />
                        <path
                          d="M78.2,11H33.5C21,11,10.8,21.3,10.8,33.7v44.7c0,12.6,10.2,22.8,22.7,22.8h44.7c12.6,0,22.7-10.2,22.7-22.7 V33.7C100.8,21.1,90.6,11,78.2,11z M91,78.4c0,7.1-5.8,12.8-12.8,12.8H33.5c-7.1,0-12.8-5.8-12.8-12.8V33.7 c0-7.1,5.8-12.8,12.8-12.8h44.7c7.1,0,12.8,5.8,12.8,12.8V78.4z"
                        />
                      </svg>
                    </span>
                  </a>
                </div>
              </div>
            </div>
          </div> </div
        ><!--/product_item--><!--/product-->
      </div>
    </section>
    <section class="u-clearfix u-section-2" id="sec-ac21">
      <div class="u-clearfix u-sheet u-sheet-1"></div>
    </section>

    <section class="u-backlink u-clearfix u-grey-80">
      <a class="u-link" href="https://nicepage.com/website-templates" target="_blank">
        <span>Website Templates</span>
      </a>
      <p class="u-text">
        <span>created with</span>
      </p>
      <a class="u-link" href="" target="_blank"> <span>Website Builder Software</span> </a>.
    </section>
  </div>
</template>

<script lang="ts" setup></script>

<style scoped lang="less">
  .u-section-1 .u-sheet-1 {
    min-height: 565px;
  }

  .u-section-1 .u-product-1 {
    min-height: 446px;
    height: auto;
    margin: 60px auto 60px 0;
  }

  .u-section-1 .u-container-layout-1 {
    padding: 30px;
  }

  .u-section-1 .u-image-1 {
    width: 540px;
    height: 374px;
    margin: 6px auto 0 6px;
  }

  .u-section-1 .u-group-1 {
    width: 512px;
    min-height: 376px;
    height: auto;
    margin: -374px 0 0 auto;
  }

  .u-section-1 .u-container-layout-2 {
    padding: 17px 30px;
  }

  .u-section-1 .u-text-1 {
    font-size: 2.25rem;
    margin: 0 195px 0 0;
  }

  .u-section-1 .u-product-price-1 {
    margin: 22px auto 0 0;
  }

  .u-section-1 .u-line-1 {
    width: 100px;
    height: 4px;
    transform-origin: center top;
    margin: 18px auto 0 0;
  }

  .u-section-1 .u-btn-1 {
    border-style: solid;
    letter-spacing: 1px;
    font-weight: 700;
    text-transform: uppercase;
    background-image: none;
    margin: 30px auto 0 0;
  }

  .u-section-1 .u-btn-2 {
    border-style: solid;
    font-weight: 700;
    text-transform: uppercase;
    margin: -49px 80px 0 auto;
  }

  .u-section-1 .u-btn-3 {
    border-style: none;
    font-weight: 700;
    margin: 60px auto 0 0;
    padding: 0;
  }

  .u-section-1 .u-social-icons-1 {
    white-space: nowrap;
    height: 24px;
    min-height: 16px;
    width: 151px;
    min-width: 128px;
    margin: 30px auto 0 0;
  }

  .u-section-1 .u-icon-2 {
    height: 100%;
  }

  .u-section-1 .u-icon-3 {
    height: 100%;
  }

  .u-section-1 .u-icon-4 {
    height: 100%;
  }

  @media (max-width: 1199px) {
    .u-section-1 .u-sheet-1 {
      min-height: 556px;
    }

    .u-section-1 .u-product-1 {
      min-height: 435px;
      margin-top: 36px;
      margin-bottom: 36px;
      margin-right: initial;
      margin-left: initial;
    }

    .u-section-1 .u-image-1 {
      width: 428px;
      height: 289px;
      margin-top: 43px;
      margin-left: 0;
    }

    .u-section-1 .u-group-1 {
      width: 440px;
      min-height: 366px;
      margin-top: -328px;
      height: auto;
    }

    .u-section-1 .u-container-layout-2 {
      padding-top: 14px;
      padding-bottom: 14px;
    }

    .u-section-1 .u-text-1 {
      margin-right: 123px;
    }

    .u-section-1 .u-btn-1 {
      margin-top: 26px;
    }

    .u-section-1 .u-btn-2 {
      margin-right: 0;
      padding: 10px 34px;
    }

    .u-section-1 .u-btn-3 {
      margin-top: 45px;
    }
  }

  @media (max-width: 991px) {
    .u-section-1 .u-sheet-1 {
      min-height: 954px;
    }

    .u-section-1 .u-product-1 {
      min-height: 834px;
      margin-top: 60px;
      margin-bottom: 11px;
      margin-right: initial;
      margin-left: initial;
    }

    .u-section-1 .u-image-1 {
      width: 620px;
      height: 381px;
      margin-top: 0;
      margin-left: auto;
    }

    .u-section-1 .u-group-1 {
      min-height: 371px;
      margin-top: 18px;
      margin-right: initial;
      margin-left: initial;
      width: auto;
    }

    .u-section-1 .u-text-1 {
      margin-top: 2px;
      margin-right: 20px;
    }

    .u-section-1 .u-btn-1 {
      width: 177px;
      height: 45px;
    }

    .u-section-1 .u-btn-2 {
      margin-right: auto;
      margin-left: 201px;
    }
  }

  @media (max-width: 767px) {
    .u-section-1 .u-sheet-1 {
      min-height: 894px;
    }

    .u-section-1 .u-product-1 {
      min-height: 774px;
      margin-bottom: 0;
      margin-right: initial;
      margin-left: initial;
    }

    .u-section-1 .u-container-layout-1 {
      padding-left: 10px;
      padding-right: 10px;
    }

    .u-section-1 .u-image-1 {
      width: 510px;
      height: 311px;
    }

    .u-section-1 .u-group-1 {
      min-height: 361px;
      margin-top: 20px;
      width: auto;
      margin-right: initial;
      margin-left: initial;
    }

    .u-section-1 .u-container-layout-2 {
      padding-left: 0;
      padding-right: 0;
    }

    .u-section-1 .u-btn-2 {
      margin-left: 101px;
    }
  }

  @media (max-width: 575px) {
    .u-section-1 .u-sheet-1 {
      min-height: 804px;
    }

    .u-section-1 .u-product-1 {
      min-height: 684px;
      margin-right: initial;
      margin-left: initial;
    }

    .u-section-1 .u-image-1 {
      width: 320px;
      height: 195px;
    }

    .u-section-1 .u-group-1 {
      min-height: 408px;
      width: auto;
      margin-right: initial;
      margin-left: initial;
    }

    .u-section-1 .u-text-1 {
      font-size: 1.5rem;
    }

    .u-section-1 .u-btn-2 {
      margin-top: 22px;
      margin-left: 0;
      padding-right: 40px;
      padding-bottom: 11px;
      padding-left: 40px;
    }

    .u-section-1 .u-btn-3 {
      margin-top: 40px;
    }
  }
  .u-section-2 .u-sheet-1 {
    min-height: 400px;
  }
</style>
