@media screen and (max-width: 1024px) {
        #customize-main.customize-layout:not(.hub-layout) {
                flex-direction: column;
                gap: 16px;
                height: auto;
                min-height: 0;
                padding: 16px;
        }

        #customize-main.customize-layout:not(.hub-layout) #left-sidebar,
        #customize-main.customize-layout:not(.hub-layout) > #content {
                flex: none;
                max-width: 100%;
                width: 100%;
                height: auto;
                overflow: visible;
        }

        #customize-main.customize-layout:not(.hub-layout) #left-sidebar {
                padding: 20px;
        }

        #customize-main.customize-layout:not(.hub-layout) > #content > .content-images {
                padding-right: 0;
                flex: none;
                overflow: visible;
        }

        #customize-main.customize-layout:not(.hub-layout) > #content > .content-images .grid-wrapper {
                padding: 0;
                justify-content: flex-start;
                align-items: stretch;
        }

        #customize-main.customize-layout:not(.hub-layout) > #content > .content-images .image-grid {
                width: 100%;
                max-width: none;
                aspect-ratio: auto;
                height: auto;
        }

        #customize-main.customize-layout:not(.hub-layout) > #content > .content-images .variant-display {
                padding: 16px 16px 0;
        }
}

@media screen and (max-width: 768px) {
        #customize-main.customize-layout:not(.hub-layout) {
                padding: 12px;
        }

        #customize-main.customize-layout:not(.hub-layout) #left-sidebar {
                padding: 16px;
        }

        #customize-main.customize-layout:not(.hub-layout) > #content {
                border-radius: 20px;
        }

        #customize-main.customize-layout:not(.hub-layout) > #content > .content-images {
                gap: 16px;
        }

        #customize-main.customize-layout:not(.hub-layout) > #content > .content-images .image-grid {
                gap: 12px;
        }
}

@media screen and (max-width: 600px) {
        #customize-main.customize-layout:not(.hub-layout) > #content > .content-images .image-grid {
                grid-template-columns: 1fr;
        }
}