@media screen and (max-width: 820px) {
    .health-symptoms-section {
        .my-container {
            .section-sub-title {
                padding-bottom: 6px;
            }

            .health-symptoms-panel {
                padding-top: 6px;

                .health-symptoms-list {
                    gap: 6px;

                    grid-template-columns: repeat(2, minmax(0, 1fr));

                    .health-symptom-card {
                        padding: 12px;
                        gap: 8px;

                        .health-symptom-card__icon {
                            width: 46px;
                            height: 46px;
                        }

                        .health-symptom-card__label {
                            font-size: 14px;
                        }
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 768px) {
    .health-symptoms-list {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .health-symptom-card {
        padding: 16px 18px;
        border-radius: 16px;
    }

    .health-aid-trilogy__connector {
        display: none;
    }

    .health-aid-trilogy__steps {
        width: 100%;
        gap: 0;
        flex-wrap: nowrap;

        .w-arrow {
            width: 40px;
            height: 40px;
        }
    }

    .health-aid-trilogy__step {
        min-width: auto;
        justify-content: flex-start;
        gap: 8px;

        &:nth-child(1), 
        &:nth-child(5) {
            margin-top: 30px;
        }

        .health-aid-trilogy__step-text {
            font-size: 16px;
        }

        .icon-wrapper {
            width: 60px;
            height: 60px;

            .health-aid-trilogy__step-num {
                width: 22px;
                height: 22px;
                font-size: 13px;
            }
        }
    }

    .health-condition-cards {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
        margin-bottom: 0;
    }

    /* 直向排列時勿沿用 flex: 1 1 0，否則配合 overflow:hidden 會把卡片高度壓扁並裁切內容 */
    .health-condition-card {
        flex: none;
        width: 100%;
    }

    .health-condition-card__body {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .health-condition-block--wide {
        grid-column: auto;
    }

    .health-diseases-section {
        .health-condition-card {
            padding: 12px;

            .health-condition-card__img {
                width: 80px;
                height: 80px;
            }

            .health-condition-card__header {
                padding-bottom: 6px;
                margin-bottom: 6px;
            }

            .health-condition-card__title {
                font-size: 20px;
            }

            .health-disease-feature__heading {
                font-size: 18px;
                line-height: 26px;
                margin-bottom: 2px;
            }

            .health-disease-feature {
                gap: 6px;
                padding: 10px 0;

                .health-condition-note {
                    margin-top: 4px;
                    font-size: 13px;
                    padding: 4px 0 0 0;
                }
            }

            .checked-icon {
                width: 18px;
                height: 18px;
                margin-top: 3px;
            }

            .health-disease-feature__sub {
                li {
                    font-size: 15px;
                    line-height: 24px;
                    margin-bottom: 2px;
                }
            }

            .health-disease-feature__steps {
                li {
                    margin-bottom: 4px;
                    padding-left: 22px;

                    &::before {
                        width: 20px;
                        height: 20px;
                        line-height: 20px;
                        top: 2px;
                    }
                }
            }
        }
    }

    .health-condition-card .health-disease-feature__text,
    .health-condition-card .health-disease-feature__sub li,
    .health-condition-card .health-disease-feature__steps li {
        font-size: 15px;
        line-height: 24px;
    }

    .steps-section {
        padding-bottom: 120px;
        .my-container {
            gap: 0;
        }
    }
}

@media screen and (max-width: 576px) {
    .health-symptom-card {
        gap: 14px;
    }

    .health-symptom-card__label {
        font-size: 15px;
    }
}