.layout{display:grid;grid-template-areas:"top top top" "left center right" "bottom bottom bottom";grid-template-columns:auto minmax(0,1fr) auto;background-color:#000}.preview-in-component{border:1px solid #ccc;grid-template-rows:auto auto auto}.preview-in-component .ad{border:2px dashed #ccc;background-color:#f9f9f9}.preview-in-component .top-area.ad,.preview-in-component .bottom-area.ad{min-height:100px}.preview-in-component .left-area.ad,.preview-in-component .right-area.ad{min-width:146px;min-height:100px}.top-area{grid-area:top}.bottom-area{grid-area:bottom}.left-area{grid-area:left}.right-area{grid-area:right}.center-area{grid-area:center}.ad{display:flex;justify-content:center;align-items:center;overflow:hidden;position:relative}.ad label{display:flex;justify-content:center;align-items:center;width:100%;height:100%;cursor:pointer}.ad .MuiButton-root{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none}.top-area img,.bottom-area img{width:100%;height:auto;display:block;object-fit:cover;max-height:100px}.left-area img,.right-area img{height:100%;width:auto;display:block;object-fit:cover;max-width:146px}.center-area{background:#fff;overflow:auto;border:2px solid #87C995}.center-area table{border-collapse:collapse;width:100%;background:#fff}.center-area th,.center-area td{padding:.5em;border-bottom:1px solid #ddd;white-space:nowrap}.center-area th{background:#87c995;color:#2f3e42;text-align:center}.center-area tr:nth-child(2n) td{background:#e8f5e9}