.row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; /* Adjust as needed */
  margin: 0 -8px;
 
}

.introduction {
  flex: 0 0 calc(33% - 16px); /* Adjust width as needed */
  margin: 8px;
  box-sizing: border-box;
  }
  
  /* 標題樣式 */
  .introduction h1 {
    font-size: 2em;
    margin-bottom: 10px;
    color: #333;
  }
  
  
  /* 內容段落樣式 */
  .introduction p {
    margin: 5px 0;
    color: #555;
  }
  .card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    max-width: 300px;
    margin: auto;
    text-align: center;
    font-family: arial;
  }
  
  .card img {
    width: 100%;
    height: 400px; /* 設定相同的高度 */
    object-fit: cover; /* 根據容器大小自動調整圖片 */
  }
  
  .card .price {
    border: none;
    outline: 0;
    padding: 12px;
    color: white;
    background-color: #646161;
    text-align: center;
    cursor: pointer;
    width: calc(100% - 24px); /* 使用 calc() 减去 padding 或 margin 的宽度 */
    font-size: 18px;
    text-decoration: none;
  }
  .card .price:hover  {
    opacity: 0.7;
  }
  .card .line {
    border: none;
    outline: 0;
    padding: 12px;
    color: white;
    background-color: #07b53a;
    text-align: center;
    cursor: pointer;
    width: calc(100% - 24px); /* 使用 calc() 减去 padding 或 margin 的宽度 */
    font-size: 18px;
    text-decoration: none;
  }
  .card .line:hover  {
    opacity: 0.7;
  }
  .card button {
    border: none;
    outline: 0;
    padding: 12px;
    color: white;
    background-color: #000;
    text-align: center;
    cursor: pointer;
    width: 100%;
    font-size: 18px;
  }
  
  
  .card button:hover {
    opacity: 0.7;
  }
  .hero-image {
    /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
    background-image:  url("../assets/photo/182714373.jpg");
  
    /* Set a specific height */
    height: 500px;
  
    /* Position and center the image to scale nicely on all screens */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
  }
  .hero-text {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
  }
  .hero-image  .btn {
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    background-color: #555;
    text-decoration: none; /* 移除底線 */
    color: white;
    font-size: 16px;
    padding: 5px 10px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
  }
  
  .hero-image  .btn:hover {
    background-color: black;
  }
  
  

  
  @media screen and (max-width: 900px) {
    .introduction {
      flex: 0 0 calc(50% - 16px); /* Two columns on smaller screens */
    }
    .hero-image {
      height: 300px;
    }

  }
  
  
  
  
  @media screen and (max-width: 600px) {
    .introduction {
      flex: 0 0 calc(100% - 16px); /* Single column on smallest screens */
    }
  }