✏️ Editing: theme-block-dynamic-data.scss Writable

@use '../../../../../static/sass/frontend/4-components/star-rating';

// dynamic data
.ct-dynamic-data {

a {
		text-decoration: none;
		--theme-link-initial-color: initial;
	}

// woo sale price defaults
	.sale-price {
		display: inline-flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		column-gap: 5px;

del {
			order: 2;
			font-size: 80%;
		}

ins {
			text-decoration: none;
		}
	}

// product brands
	.ct-product-brands {
		display: inline-flex;
		align-items: center;
		flex-wrap: wrap;
		gap: var(--product-brands-gap, 10px);

.ct-media-container {
			max-width: var(--product-brand-logo-size, 60px);
		}
	}

// special case with image
	// https://creativethemes.slack.com/archives/GTG15AXAQ/p1768379287167299
	img {
		max-width: 100%;
    	vertical-align: bottom;
	}
}

// dynamic media
.ct-dynamic-media {
	display: flex;
	flex-direction: column;
	margin: 0;

img {
		box-sizing: border-box;
		vertical-align: bottom;
	}

.ct-dynamic-media-inner {
		position: relative;
		width: 100%;
		height: 100%;
		overflow: hidden;
		will-change: transform;
		box-sizing: border-box;

&[data-hover] img {
			transition: transform 0.5s ease;
		}

&[data-hover="zoom-in"] {

&:hover img {
				transform: scale(1.1);
			}
		}

&[data-hover="zoom-out"] {

img {
				transform: scale(1.1);
			}

&:hover img {
				transform: scale(1.0);
			}
		}
	}

// video indicator
	.ct-video-indicator {
		position: absolute;
		inset: 0;
		z-index: 3;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		transition: opacity 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955),
					visibility 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955);

svg {
			border-radius: 100%;
			transition: transform 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955);
		}
	}

// image placeholder
	.ct-dynamic-data-placeholder {
		display: flex;
		width: 100%;
		overflow: hidden;
		box-sizing: border-box;
		border: 1px dashed rgb(58 79 102 / 25%) !important;
		background: rgb(58 79 102 / 2%);

.ct-dynamic-data-placeholder-illustration {
			width: 100%;
			stroke-dasharray: 3;
			stroke: rgb(58 79 102 / 25%);
		}
	}

&.wp-block-cover .ct-dynamic-data-placeholder {
		position: absolute;
		inset: 0;
	}
}

🔐 Sid Gifari File Manager Pro