@media screen and (max-width: 1600px) {
    .main-wrapper .rest-area-station-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media screen and (max-width: 1280px) {
    .rest-area-station-card__media {
        max-width: 36%;
    }

    .rest-area-intro-section .section-content {
        gap: 16px;
    }

    .rest-area-station-group__grid {
        padding: 12px;
        gap: 12px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rest-area-list-section {
        padding-bottom: 180px;
    }
}

@media screen and (max-width: 1200px) {
    .rest-area-banner {
        min-height: 200px;
        padding: 40px 0 36px;
    }

    .rest-area-intro-section {
        padding: 40px 0 30px;
    }

    .rest-area-intro__swiper-wrap {
        max-width: 100%;
    }

    .rest-area-intro-swiper {
        border-radius: 20px;
    }

    .rest-area-list-section .main-wrapper {
        flex-direction: column;
        gap: 20px;
    }

    .rest-area-district-tabs {
        flex: none;
        width: 100%;
        max-height: none;
        position: static;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0 0 12px;
        gap: 8px;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        border-bottom: 1px solid rgba(1, 93, 178, 0.12);
    }

    .rest-area-district-tabs .area-tab {
        flex: 0 0 auto;
        width: auto;
        scroll-snap-align: start;
        padding: 8px 14px;
        font-size: 13px;
        border-radius: 999px;
        white-space: nowrap;
    }

    .main-wrapper .rest-area-station-grid {
        grid-template-columns: 1fr;

        .rest-area-station-card__media {
            max-width: 16%;
        }
    }
}

@media screen and (max-width: 968px) {
    .rest-area-intro-section {
        .section-content {
            flex-direction: column;
            gap: 16px;

            .left-wrapper,
            .right-wrapper {
                width: 100%;
                justify-content: center;
            }
        }
    }

    .rest-area-list-section {
        padding-bottom: 120px;

        .rest-area-station-group__title {
            padding: 12px;
        }

        .rest-area-station-card {
            border-radius: 12px;
        }
    }
}

@media screen and (max-width: 789px) {
    .rest-area-intro__slide {
        aspect-ratio: 16 / 10;
    }

    .rest-area-intro-pagination .swiper-pagination-bullet {
        width: 6px;
        height: 6px;
    }

    .main-wrapper .rest-area-station-grid {
        .rest-area-station-card {
            display: flex;
            flex-flow: column;
        }

        .rest-area-station-card__media {
            max-width: 100%;
            max-height: 150px;
        }

        .rest-area-station-card__content {
            padding: 12px
        }
    }

    .rest-area-station-group__grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));

        .rest-area-station-card__media {
            flex: none;
            max-width: 28%;
            max-height: 180px;
        }

        .rest-area-station-card__content {
            padding: 12px;

            .rest-area-station-card__seq {
                width: 50px;
                height: 50px;
                font-size: 26px;
                top: -6px;
                right: -6px;

                &.rest-area-station-card__seq--house {
                    top: auto;
                    bottom: 6px;
                    right: 6px;
                    font-size: 16px;
                }
            }

            .rest-area-station-card__tips {
                gap: 4px 10px;

                .rest-area-station-card__tip {
                    padding: 4px 6px;
                    font-size: 12px;
                    line-height: 12px;
                    padding: 0;
                    border: none;
                    box-shadow: none;
                    position: relative;

                    &::after {
                        content: "、";
                        width: 6px;
                        height: 6px;
                        bottom: 6px;
                        right: -6px;
                        position: absolute;
                    }

                    &:last-child {
                        &::after {
                            display: none;
                        }
                    }
                }
            }
        }


    }


}