export default function Featured() {
  return (
    <section className="section pt-36">
      <div className="container">
        <div className="layout-4">
          <h2 className="heading-decoration-1">
            <span className="heading-inner">Featured Properties</span>
          </h2>
          <div className="layout-4-item">
            <ul className="list-inline-bordered heading-7">
              <li>
                <a href="#">For Rent</a>
              </li>
              <li>
                <a href="#">For Sale</a>
              </li>
            </ul>
          </div>
        </div>
        <div className="row row-50">
          <div className="col-md-6 col-lg-4">
            <article className="product-classic">
              <div className="product-classic-media">
                <div
                  className="owl-carousel"
                  data-items="1"
                  data-nav="true"
                  data-stage-padding="0"
                  data-loop="false"
                  data-margin="0"
                  data-mouse-drag="false"
                >
                  <img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
                  <img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
                  <img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
                  <img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
                </div>
                <div className="product-classic-price">
                  <span>$5000\mo</span>
                </div>
              </div>
              <h4 className="product-classic-title">
                <a href="single-property.html">401 Biscayne Boulevard, Miami</a>
              </h4>
              <div className="product-classic-divider"></div>
              <ul className="product-classic-list">
                <li>
                  <span className="icon mdi mdi-vector-square"></span>
                  <span>480 Sq Ft</span>
                </li>
                <li>
                  <span className="icon hotel-icon-10"></span>
                  <span>2 Bathrooms</span>
                </li>
                <li>
                  <span className="icon hotel-icon-05"></span>
                  <span>2 Bedrooms</span>
                </li>
                <li>
                  <span className="icon hotel-icon-26"></span>
                  <span>1 Garage</span>
                </li>
              </ul>
            </article>
          </div>
          <div className="col-md-6 col-lg-4">
            <article className="product-classic">
              <div className="product-classic-media">
                <div
                  className="owl-carousel"
                  data-items="1"
                  data-nav="true"
                  data-stage-padding="0"
                  data-loop="false"
                  data-margin="0"
                  data-mouse-drag="false"
                >
                  <img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
                  <img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
                  <img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
                  <img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
                </div>
                <div className="product-classic-price">
                  <span>$2500\mo</span>
                </div>
              </div>
              <h4 className="product-classic-title">
                <a href="single-property.html">923 Folsom St, San Francisco</a>
              </h4>
              <div className="product-classic-divider"></div>
              <ul className="product-classic-list">
                <li>
                  <span className="icon mdi mdi-vector-square"></span>
                  <span>535 Sq Ft</span>
                </li>
                <li>
                  <span className="icon hotel-icon-10"></span>
                  <span>2 Bathrooms</span>
                </li>
                <li>
                  <span className="icon hotel-icon-05"></span>
                  <span>3 Bedrooms</span>
                </li>
                <li>
                  <span className="icon hotel-icon-26"></span>
                  <span>1 Garage</span>
                </li>
              </ul>
            </article>
          </div>
          <div className="col-md-6 col-lg-4">
            <article className="product-classic">
              <div className="product-classic-media">
                <div
                  className="owl-carousel"
                  data-items="1"
                  data-nav="true"
                  data-stage-padding="0"
                  data-loop="false"
                  data-margin="0"
                  data-mouse-drag="false"
                >
                  <img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
                  <img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
                  <img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
                  <img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
                </div>
                <div className="product-classic-price">
                  <span>9340\mo</span>
                </div>
              </div>
              <h4 className="product-classic-title">
                <a href="single-property.html">225 Maywood Dr, San Francisco</a>
              </h4>
              <div className="product-classic-divider"></div>
              <ul className="product-classic-list">
                <li>
                  <span className="icon mdi mdi-vector-square"></span>
                  <span>435 Sq Ft</span>
                </li>
                <li>
                  <span className="icon hotel-icon-10"></span>
                  <span>1 Bathroom</span>
                </li>
                <li>
                  <span className="icon hotel-icon-05"></span>
                  <span>1 Bedroom</span>
                </li>
                <li>
                  <span className="icon hotel-icon-26"></span>
                  <span>1 Garage</span>
                </li>
              </ul>
            </article>
          </div>
          <div className="col-md-6 col-lg-4">
            <article className="product-classic">
              <div className="product-classic-media">
                <div
                  className="owl-carousel"
                  data-items="1"
                  data-nav="true"
                  data-stage-padding="0"
                  data-loop="false"
                  data-margin="0"
                  data-mouse-drag="false"
                >
                  <img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
                  <img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
                  <img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
                  <img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
                </div>
                <div className="product-classic-price">
                  <span>$5550\mo</span>
                </div>
              </div>
              <h4 className="product-classic-title">
                <a href="single-property.html">35 Pond St, New York</a>
              </h4>
              <div className="product-classic-divider"></div>
              <ul className="product-classic-list">
                <li>
                  <span className="icon mdi mdi-vector-square"></span>
                  <span>430 Sq Ft</span>
                </li>
                <li>
                  <span className="icon hotel-icon-10"></span>
                  <span>2 Bathrooms</span>
                </li>
                <li>
                  <span className="icon hotel-icon-05"></span>
                  <span>3 Bedrooms</span>
                </li>
                <li>
                  <span className="icon hotel-icon-26"></span>
                  <span>1 Garage</span>
                </li>
              </ul>
            </article>
          </div>
          <div className="col-md-6 col-lg-4">
            <article className="product-classic">
              <div className="product-classic-media">
                <div
                  className="owl-carousel"
                  data-items="1"
                  data-nav="true"
                  data-stage-padding="0"
                  data-loop="false"
                  data-margin="0"
                  data-mouse-drag="false"
                >
                  <img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
                  <img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
                  <img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
                  <img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
                </div>
                <div className="product-classic-price">
                  <span>$2520\mo</span>
                </div>
              </div>
              <h4 className="product-classic-title">
                <a href="single-property.html">182 3rd St, Seattle</a>
              </h4>
              <div className="product-classic-divider"></div>
              <ul className="product-classic-list">
                <li>
                  <span className="icon mdi mdi-vector-square"></span>
                  <span>630 Sq Ft</span>
                </li>
                <li>
                  <span className="icon hotel-icon-10"></span>
                  <span>3 Bathrooms</span>
                </li>
                <li>
                  <span className="icon hotel-icon-05"></span>
                  <span>3 Bedrooms</span>
                </li>
                <li>
                  <span className="icon hotel-icon-26"></span>
                  <span>2 Garages</span>
                </li>
              </ul>
            </article>
          </div>
          <div className="col-md-6 col-lg-4">
            <article className="product-classic">
              <div className="product-classic-media">
                <div
                  className="owl-carousel"
                  data-items="1"
                  data-nav="true"
                  data-stage-padding="0"
                  data-loop="false"
                  data-margin="0"
                  data-mouse-drag="false"
                >
                  <img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
                  <img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
                  <img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
                  <img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
                </div>
                <div className="product-classic-price">
                  <span>$5000\mo</span>
                </div>
              </div>
              <h4 className="product-classic-title">
                <a href="single-property.html">623 Willow Rd, Dallas</a>
              </h4>
              <div className="product-classic-divider"></div>
              <ul className="product-classic-list">
                <li>
                  <span className="icon mdi mdi-vector-square"></span>
                  <span>530 Sq Ft</span>
                </li>
                <li>
                  <span className="icon hotel-icon-10"></span>
                  <span>2 Bathrooms</span>
                </li>
                <li>
                  <span className="icon hotel-icon-05"></span>
                  <span>2 Bedrooms</span>
                </li>
                <li>
                  <span className="icon hotel-icon-26"></span>
                  <span>2 Garages</span>
                </li>
              </ul>
            </article>
          </div>
          <div className="col-12 text-center">
            <a className="button button-primary" href="properties-grid.html">
              View all properties
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}
