.preview-image-boxes { float: right; margin: 0 0 70px 28px; width: 608px; clear: both; &-with-carousel { width: 420px; .preview-image-box img { padding: 0; } } } .preview-image-boxes + .preview-image-boxes { margin-top: -35px; } .preview-image-box { width: 100%; float: left; padding: 0 8px; } .preview-image-wrapper { background: #f4f4f4; padding: 16px; display: inline-block; text-align: center; width: 100%; position: relative; } .preview-image-wrapper.video { padding: 0; background: 0; display: block; } .preview-image-wrapper video { width: 100%; display: block; + svg { position: absolute; top: 0; left: 0; } } .preview-image-wrapper.good:after { content: ''; width: 100%; height: 3px; background: #2db7f5; display: block; position: absolute; bottom: 0; left: 0; } .preview-image-wrapper.bad:after { content: ''; width: 100%; height: 3px; background: #f50; display: block; position: absolute; bottom: 0; left: 0; } .preview-image-title { font-size: 12px; margin-top: 5px; color: #666; } .preview-image-description { font-size: 12px; margin-top: 2px; color: #999; line-height: 1.5; } .preview-image-description hr { margin: 2px 0; border: 0; background: none; } .preview-image-box img { cursor: pointer; max-width: 100%; transition: all 0.3s ease; background: #fff; padding: 12px; border-radius: 6px; &.no-padding { padding: 0; background: none; } } .preview-image-boxes.pack img { padding: 0; box-shadow: 0 1px 0 0 #ddd, 0 3px 0 0 #fff, 0 4px 0 0 #ddd, 0 6px 0 0 #fff, 0 7px 0 0 #ddd; } .preview-image-box img:hover { box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.3); } .image-modal { text-align: center; &-container { position: relative; text-align: center; } } .image-modal-single.slick-slider { padding-bottom: 0; } .ant-carousel .slick-slider img { display: inline; max-width: 100%; } .transition-video-player { float: right; padding: 0; width: 600px; .preview-image-wrapper { padding: 0; } }