/*
 * LiveArt styles related to various product sizes
 *
 * - Includes styles for production products in config/product.json
 *
 * Size class is automatically assigned to `body`
 * when new product is loaded:
 * - class name is `size<WIDTH>x<HEIGHT>`,
 *   where WIDTH & HEIGHT are values from `data.designerSize`
 *   in respective product config
 */

.size1269x447 #liveart-main-container {
    width: 1269px;
}
.size1202x292 #liveart-main-container {
    width: 1202px;
}
.size1020x371 #liveart-main-container {
    width: 1020px;
}
.size884x640 #liveart-main-container {
    width: 884px;
}
.size862x436 #liveart-main-container,
.size862x309 #liveart-main-container {
    width: 862px;
}
.size839x595 #liveart-main-container {
    width: 839px;
}
.size816x334 #liveart-main-container {
    width: 816px;
}
.size731x516 #liveart-main-container,
.size730x370 #liveart-main-container {
    width: 731px;
}
/* anything under 720px in width */
.size606x308 #liveart-main-container,
.size607x224 #liveart-main-container,
.size606x572 #liveart-main-container,
.size606x436 #liveart-main-container,
.size572x606 #liveart-main-container,
.size504x334 #liveart-main-container,
.size437x309 #liveart-main-container,
.size436x606 #liveart-main-container,
.size416x574 #liveart-main-container,
.size412x585 #liveart-main-container,
.size309x437 #liveart-main-container,
.size307x874 #liveart-main-container {
    width: 720px;
}

.size1269x447 #canvas-container {
    width: 1269px;
    height: 447px;
}
.size1202x292 #canvas-container {
    width: 1202px;
    height: 292px;
}
.size1020x371 #canvas-container {
    width: 1020px;
    height: 371px;
}
.size884x640 #canvas-container {
    width: 884px;
    height: 640px;
}
.size862x436 #canvas-container {
    width: 862px;
    height: 436px;
}
.size862x309 #canvas-container {
    width: 862px;
    height: 309px;
}
.size839x595 #canvas-container {
    width: 839px;
    height: 595px;
}
.size816x334 #canvas-container {
    width: 816px;
    height: 334px;
}
.size731x516 #canvas-container {
    width: 731px;
    height: 516px;
}
.size730x370 #canvas-container {
    width: 730px;
    height: 370px;
}
.size607x224 #canvas-container {
    width: 607px;
    height: 224px;
}
.size606x308 #canvas-container {
    width: 606px;
    height: 308px;
}
.size606x572 #canvas-container {
    width: 606px;
    height: 572px;
}
.size606x436 #canvas-container {
    width: 606px;
    height: 436px;
}
.size572x606 #canvas-container {
    width: 572px;
    height: 606px;
}
.size504x334 #canvas-container {
    width: 504px;
    height: 334px;
}
.size437x309 #canvas-container {
    width: 437px;
    height: 309px;
}
.size436x606 #canvas-container {
    width: 436px;
    height: 606px;
}
.size416x574 #canvas-container {
    width: 416px;
    height: 574px;
}
.size412x585 #canvas-container {
    width: 412px;
    height: 585px;
}
.size309x437 #canvas-container {
    width: 309px;
    height: 437px;
}
.size307x874 #canvas-container {
    width: 307px;
    height: 874px;
}

/* keep canvas ratio */
.size1020x371 #canvas-container:after {
    padding-top: 36.3%;
}
.size839x595 #canvas-container:after {
    padding-top: 50.9%;
}
.size816x334 #canvas-container:after {
    padding-top: 40.3%;
}
.size730x370 #canvas-container:after {
    padding-top: 50.6%;
}
.size437x309 #canvas-container:after {
    padding-top: 70.7%;
}
.size436x606 #canvas-container:after {
    padding-top: 139%;
}
.size416x574 #canvas-container:after,
.size412x585 #canvas-container:after,
.size309x437 #canvas-container:after {
    padding-top: 142%;
}

@media (max-width: 1269px) {
    .size1269x447 #liveart-main-container {
        width: 100%;
    }
    .size1269x447 #canvas-container {
        width: 100%;
        height: 35.0vw;
    }
    .size1269x447 .liveart-panel-container {
        margin: 0;
    }
}

@media (max-width: 1202px) {
    .size1202x292 #liveart-main-container {
        width: 100%;
    }
    .size1202x292 #canvas-container {
        width: 100%;
        height: 24.0vw;
    }
    .size1202x292 .liveart-panel-container {
        margin: 0;
    }
}

@media (max-width: 1020px) {
    .size1020x371 #liveart-main-container {
        width: 100%;
    }
    .size1020x371 #canvas-container {
        width: 100%;
        height: 36.3735vw;
    }
    .size1020x371 .liveart-panel-container {
        margin: 0;
    }
}

@media (max-width: 884px) {
    .size884x640 #canvas-container {
        width: 100%;
        height: 71.53vw;
    }
    .size884x640 #liveart-main-container {
        width: 100%;
    }
    .size884x640 .liveart-panel-container {
        margin: 0;
    }
}

@media (max-width: 862px) {
    .size862x436 #canvas-container {
        width: 100%;
        height: 50.5800vw;
    }
    .size862x309 #canvas-container {
        width: 100%;
        height: 35.8468vw;
    }
    .size862x436 #liveart-main-container,
    .size862x309 #liveart-main-container {
        width: 100%;
    }
    .size862x436 .liveart-panel-container,
    .size862x309 .liveart-panel-container {
        margin: 0;
    }
}

@media (max-width: 839px) {
    .size839x595 #canvas-container {
        width: 100%;
        height: 70.92vw;
    }
    .size839x595 #liveart-main-container {
        width: 100%;
    }
    .size839x595 .liveart-panel-container {
        margin: 0;
    }
}

@media (max-width: 816px) {
    .size816x334 #canvas-container {
        width: 100%;
        height: 40.93vw;
    }
    .size816x334 #liveart-main-container {
        width: 100%;
    }
    .size816x334 .liveart-panel-container {
        margin: 0;
    }
}

@media (max-width: 731px) {
    .size731x516 #liveart-main-container {
        width: 100%;
    }
    .size731x516 #canvas-container {
        width: 100%;
        height: 70.1882vw;
    }
    .size731x516 .liveart-panel-container {
        margin: 0;
    }
}

@media (max-width: 730px) {
    .size730x370 #canvas-container {
        width: 100%;
        height: 50.68vw;
    }
    .size730x370 #liveart-main-container {
        width: 100%;
    }
    .size730x370 .liveart-panel-container {
        margin: 0;
    }
}

@media (max-width: 720px) {
    .size606x308 #liveart-main-container,
    .size607x224 #liveart-main-container,
    .size606x572 #liveart-main-container,
    .size606x436 #liveart-main-container,
    .size572x606 #liveart-main-container,
    .size504x334 #liveart-main-container,
    .size437x309 #liveart-main-container,
    .size436x606 #liveart-main-container,
    .size416x574 #liveart-main-container,
    .size412x585 #liveart-main-container,
    .size309x437 #liveart-main-container,
    .size307x874 #liveart-main-container {
        width: 100%;
    }
    .size606x308 .liveart-panel-container,
    .size607x224 .liveart-panel-container,
    .size606x572 .liveart-panel-container,
    .size606x436 .liveart-panel-container,
    .size572x606 .liveart-panel-container,
    .size504x334 .liveart-panel-container,
    .size437x309 .liveart-panel-container,
    .size436x606 .liveart-panel-container,
    .size416x574 .liveart-panel-container,
    .size412x585 .liveart-panel-container,
    .size309x437 .liveart-panel-container,
    .size307x874 .liveart-panel-container {
        margin: 0;
    }
}

@media (max-width: 607px) {
    .size606x308 #canvas-container {
        width: 100%;
        height: 49.903vw;
    }
    .size607x224 #canvas-container {
        width: 100%;
        height: 36.903vw;
    }
    .size606x572 #canvas-container {
        width: 100%;
        height: 94.5vw;
    }
    .size606x436 #canvas-container {
        width: 100%;
        height: 71.9471vw;
    }
}

@media (max-width: 572px) {
    .size572x606 #canvas-container {
        width: 100%;
        height: 105.9vw;
    }
}

@media (max-width: 504px) {
    .size504x334 #canvas-container {
        width: 100%;
        height: 66.1478vw;
    }
}

@media (max-width: 437px) {
    .size437x309 #canvas-container {
        width: 100%;
        height: 70.7093vw;
    }
    .size436x606 #canvas-container {
        width: 100%;
        height: 139vw;
    }
}

@media (max-width: 420px) {
    .size420x298 #canvas-container {
        width: 100%;
        height: 70.9523vw;
    }
}

@media (max-width: 416px) {
    .size416x574 #canvas-container {
        width: 100%;
        height: 137vw;
    }
}

@media (max-width: 412px) {
    .size412x585 #canvas-container {
        width: 100%;
        height: 142vw;
    }
}

@media (max-width: 309px) {
    .size309x437 #canvas-container {
        width: 100%;
        height: 141.42vw;
    }
}