.main-good-component {
    width: 100%;
}

    .main-good-component .main-good-wrap {
        padding: 28px 20px 0 20px;
        box-sizing: border-box;
        min-width: 375px;
    }

    .main-good-component .main-good-container {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }

    .main-good-component .main-good-content {
        cursor: pointer;
        border-radius: 8px;
        background: #5b5b5b;
        height: 220px;
        /* 初始高度 */
        transition: height 0.1s;
        /* 平滑过渡效果 */
        width: 335px;
        overflow: hidden;
    }

        .main-good-component .main-good-content img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

    .main-good-component .main-good-action {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: white;
        transition: all 0.3s ease-in-out;
        border-radius: 8px;
        box-shadow: inset 4px 4px 10px 0px rgba(130, 130, 130, 0.25);
        backdrop-filter: blur(50px);
        -webkit-backdrop-filter: blur(50px);
        /* Safari支持 */
        background: rgba(255, 255, 255, 0.25);
        width: 520px;
        height: 280px;
    }

        .main-good-component .main-good-action .good-text {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 14px;
        }

            .main-good-component .main-good-action .good-text h1,
            .main-good-component .main-good-action .good-text h3 {
                margin: 0;
            }

            .main-good-component .main-good-action .good-text h1 {
                font-size: 32px;
                font-weight: 500;
                line-height: 24px;
            }

            .main-good-component .main-good-action .good-text h3 {
                font-size: 18px;
                font-weight: 400;
                line-height: 20px;
                margin-top: 6px;
            }

        .main-good-component .main-good-action .entry-btn {
            display: flex;
            border-radius: 33px;
            width: 358px;
            height: 53px;
            font-size: 28px;
            font-weight: 700;
            line-height: 20px;
            background: #e6ff00;
            justify-content: space-between;
            align-items: center;
            padding: 0 18px;
            color: #1b1b1b;
            margin-top: 21px;
            cursor: pointer;
        }

            .main-good-component .main-good-action .entry-btn img {
                width: 32px;
                height: 32px;
            }
/* 375px - 1500px 之间线性变化 */
@media screen and (min-width: 375px) and (max-width: 1500px) {
    .main-good-component .main-good-content {
        width: calc(375px + (1500 - 375) * ((100vw - 375px) / (1500 - 375)));
        height: calc(220px + (574 - 220) * ((100vw - 375px) / (1500 - 375)));
    }
}

@media screen and (min-width: 1500px) {
    .main-good-component .main-good-content {
        width: 1500px;
        height: 574px;
    }
}

@media (max-width: 850px) {
    .main-good-component .main-good-action {
        transform: unset;
        bottom: 0;
        left: 0;
        right: 0;
        top: inherit;
        padding: 0 10px;
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
        height: 64px;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

        .main-good-component .main-good-action .good-text {
            display: flex;
            flex-direction: column;
            align-items: start;
            gap: 8px;
        }

            .main-good-component .main-good-action .good-text h1 {
                font-size: 20px;
                font-weight: 700;
                line-height: 20px;
            }

            .main-good-component .main-good-action .good-text h3 {
                font-size: 12px;
                font-weight: 400;
                line-height: 12px;
                margin-top: 0px;
            }

        .main-good-component .main-good-action .entry-btn {
            position: absolute;
            right: 10px;
            bottom: 10px;
            width: 68px;
            height: 24px;
            border-radius: 20px;
            font-size: 18px;
            font-weight: 700;
            line-height: 26px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

            .main-good-component .main-good-action .entry-btn img {
                display: none;
            }
}