@media (max-width: 1220px) {
    .mg-product-hero {
        grid-template-columns: 1fr;
    }

    .mg-summary {
        position: static;
    }

    .mg-product-related__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .mg-product-container {
        padding: 0 16px;
    }

    .mg-product-gallery {
        grid-template-columns: 72px minmax(0, 1fr);
        gap: 8px;
    }

    .mg-product-gallery__thumb {
        width: 66px;
        height: 66px;
    }

    .mg-product-gallery {
        min-height: 360px;
    }

    .mg-summary__title {
        font-size: 24px;
    }

    .mg-summary__price {
        font-size: 28px;
    }

    .mg-product-spec-row {
        grid-template-columns: 1fr;
    }

    .mg-product-spec-row div:first-child {
        padding-bottom: 4px;
    }

    .mg-product-related__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .mg-product-page {
        padding-top: 18px;
    }

    .mg-product-gallery {
        grid-template-areas:
            "main"
            "thumbs";
        grid-template-columns: 1fr;
    }

    .mg-product-gallery {
        min-height: 300px;
    }

    .mg-product-gallery__main {
        border-radius: 22px;
    }

    .mg-product-gallery__image {
        padding: 24px;
    }

    .mg-product-gallery__thumbs {
        flex-direction: row;
        overflow-x: auto;
        gap: 8px;
        padding-bottom: 2px;
    }

    .mg-product-gallery__thumb {
        width: 66px;
        height: 66px;
        flex-shrink: 0;
        border-radius: 14px;
    }

    .mg-summary {
        padding: 16px;
        border-radius: 22px;
    }

    .mg-summary__actions {
        gap: 6px;
    }

    .mg-summary__actions .mg-btn {
        font-size: 12px;
        padding: 0 6px;
    }

    .mg-product-related__grid {
        grid-template-columns: 1fr;
    }

    .mg-product-section-head {
        align-items: stretch;
        flex-direction: column;
    }

    .mg-product-modal {
        width: 100%;
        max-width: 100%;
    }
}