body * {
    font-family: "Microsoft JhengHei", "Arial", "sans-serif";
}

h2.new_title {
    color: #bf0000;
    font-weight: 800;
}

a.row_card:hover {
    text-decoration: none;
}


.mastercard_img {
    width: 100%;
}

.description {
    font-size: 20px;
    color: black;
    line-height: 1.5;
    letter-spacing: 1px;
    margin: 0px 0 15px;
    font-weight: bold;
}

.row {
    width: 950px;
}


.shop_name {
    width: 100%;
    background-image: linear-gradient(90deg, #ff4a4c, #ffc240);
    border-radius: 16px;
}

.shop_name h4 {
    font-size: 28px;
    font-weight: 800;
    color: #fff;
    text-align: center;
}

.shop_img {
    width: 30%;
}

.shop_img img {
    width: 100%;
    border-radius: 15px;
}

.shop_text {
    width: 70%;
    text-align: start;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.discount {
    border-bottom: 1px solid #ccc;
}

.discount h6 {
    font-size: 22px;
    font-weight: 600;
}

.red {
    font-size: 36px;
}

.date {
    font-size: 16px;
}

.more_btn a {
    text-decoration: underline;
    color: #fff;
}

@property --gradient-color-1 {
    syntax: '<color>';
    inherits: false;
    initial-value: #ff4a4c;

}

@property --gradient-color-2 {
    syntax: '<color>';
    inherits: false;
    initial-value: #ffc240;

}

@property --gradient-rotate {
    syntax: '<angle>';
    inherits: false;
    initial-value: 45deg;

}




.more_btn {

    background: linear-gradient(var(--gradient-rotate), var(--gradient-color-1), var(--gradient-color-2));
    transition: --gradient-color-1 0.8s, --gradient-color-2 0.8s, --gradient-rotate 0.8s, color 0.8s;
}

.more_btn:hover {
    --gradient-color-1: #ffc240;
    --gradient-color-2: #ff4a4c;
    --gradient-rotate: 15deg;
    color: rgba(255, 255, 255, 1);
    /* background: linear-gradient(90deg,#ffc240,#ff4a4c, #ffc240); */
    /* transition-duration: .5s; */
}

.mastercard_btn {
    display: flex;
}