@media screen and (max-width: 1199px) {
    .main-container {
        max-width: 960px;
    }
}
@media screen and (max-width: 991px) {
    .main-container {
        max-width: 740px;
    }
    .live-preview-container {
        width: 250px;
        height: 250px;
    }
    .upload-area {
        height: 250px;
    }
}
@media screen and (max-width: 767px) {
    .main-container {
        flex-direction: column;
    }
    .main-container.header,
    .main-container.footer {
        flex-direction: row;
    }
    .preview-frames-section {
        flex-direction: column;
        width: 100%;
    }
    .frames-list {
        width: 100%;
    }
    .frames-list img {
        width: 60px;
        height: auto;
    }
    .preview-section {
        width: 100%;
    }
    .live-preview-container {
        margin: auto;
    }
}