.preview-image-boxes { display: flex; float: right; clear: both; width: 496px; margin: 0 0 70px 64px; &-with-carousel { width: 420px; .preview-image-box img { padding: 0; } } } .preview-image-boxes + .preview-image-boxes { margin-top: -35px; } .preview-image-box { float: left; width: 100%; } .preview-image-box + .preview-image-box { margin-left: 24px; } .preview-image-wrapper { position: relative; display: inline-block; width: 100%; padding: 16px; text-align: center; background: #f2f4f5; } .preview-image-wrapper.video { display: block; padding: 0; background: 0; } .preview-image-wrapper video { display: block; width: 100%; + svg { position: absolute; top: 0; left: 0; } } .preview-image-wrapper.good::after { position: absolute; bottom: 0; left: 0; display: block; width: 100%; height: 3px; background: @primary-color; content: ''; } .preview-image-wrapper.bad::after { position: absolute; bottom: 0; left: 0; display: block; width: 100%; height: 3px; background: @error-color; content: ''; } .preview-image-title { margin-top: 5px; color: @site-text-color; font-size: 12px; } .preview-image-description { margin-top: 2px; color: @site-text-color-secondary; font-size: 12px; line-height: 1.5; } .preview-image-description hr { margin: 2px 0; background: none; border: 0; } .preview-image-box img { max-width: 100%; padding: 12px; background: @body-background; border-radius: @border-radius-base; cursor: pointer; transition: all 0.3s; &.no-padding { padding: 0; background: none; } } .preview-image-boxes.preview-image-boxes-with-carousel img { padding: 0; box-shadow: 0 1px 0 0 #ddd, 0 3px 0 0 @body-background, 0 4px 0 0 #ddd, 0 6px 0 0 @body-background, 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; } .ant-carousel { .slick-slider { padding-bottom: 24px; img { display: inline; } } .slick-dots { bottom: 4px; li button { background: #888; } } } .image-modal-single.slick-slider { padding-bottom: 0; } .image-modal-single .slick-dots { display: none !important; } } .transition-video-player, .motion-video-min { float: right; width: 600px; padding: 0 0 70px 20px; .preview-image-wrapper { padding: 0; } } .motion-video-min { width: 390px; } .motion-principle-wrapper { width: 100%; max-width: 900px; margin: 48px 0 24px; } .principle-wrapper { width: 100%; .principle { display: inline-block; width: 100%; min-height: 180px; margin-right: 12.5%; margin-bottom: 24px; padding: 24px; font-size: 24px; text-align: center; border: 1px solid #e8e8e8; border-radius: 4px; &:last-child { margin-right: 0; } h4 { margin: 16px 0 8px; } p { font-size: 12px; line-height: 24px; } } }