/* 基本样式 */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    box-sizing: border-box;
}

.product-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.product-title {
    width:100%;
    margin: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease;
}
.product-title h3, .product-title p {
    margin: 10px;
    text-align: center;
}
.product-item {
    width: calc(33.333% - 20px);
    margin: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.product-item img {
   aspect-ratio: 7.5/4.8;
    width: 100%;
    height: auto;
    display: block;
}

.product-item h3, .product-item p {
    margin: 10px;
    text-align: center;
}

.product-item button {
    width: 100%;
    padding: 10px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 0 0 5px 5px;
    cursor: pointer;
}
a {
            text-decoration: none; /* 去除下划线 */
            color: #ffffff; /* 设置字体颜色 */
            background-color: #007BFF; /* 设置背景颜色 */
            border-radius: 5px; /* 设置边框圆角 */
        }
        button {
            background-color: transparent; /* 设置背景透明 */
            border: none; /* 去掉边框 */
            cursor: pointer; /* 设置鼠标悬停时的光标样式 */
        }
/* 媒体查询 */
@media (max-width: 768px) {
    .product-item {
        width: calc(50% - 20px);
    }
}

@media (max-width: 500px) {
    .product-item {
        width: 100%;
    }
}