/*
 * Cuaderno: photos taped onto the page (printed-photo border, tilt, two strips of tape).
 * Optional layer: delete this file to go back to plain images (functions.php only loads it if present).
 * Opt out per image with the class "sin-cinta" (image block > Avanzado > Clase CSS adicional).
 */
.entry-content figure.wp-block-image:not(.sin-cinta),
.entry-content .wp-caption:not(.sin-cinta) {
	position: relative;
	display: table;          /* shrink to the photo's width so the tape sits on its corners */
	max-width: 100%;
	margin: 30px auto 39px;
	padding: 16px 16px 26px;
	background: #fff;
	box-shadow: 0 2px 3px rgba(60, 60, 60, .18), 0 8px 14px -6px rgba(60, 60, 60, .35);
	transform: rotate(-1.5deg);
}
.entry-content figure.wp-block-image:not(.sin-cinta):nth-of-type(2n),
.entry-content .wp-caption:not(.sin-cinta):nth-of-type(2n) { transform: rotate(1deg); }
.entry-content figure.wp-block-image:not(.sin-cinta):nth-of-type(3n),
.entry-content .wp-caption:not(.sin-cinta):nth-of-type(3n) { transform: rotate(-.6deg); }
.entry-content figure.wp-block-image:not(.sin-cinta) img,
.entry-content .wp-caption:not(.sin-cinta) img { display: block; margin: 0; box-shadow: none; border-radius: 0; }

/* two strips of translucent tape on the top corners */
.entry-content figure.wp-block-image:not(.sin-cinta)::before,
.entry-content figure.wp-block-image:not(.sin-cinta)::after,
.entry-content .wp-caption:not(.sin-cinta)::before,
.entry-content .wp-caption:not(.sin-cinta)::after {
	content: "";
	position: absolute;
	top: -9px;
	width: 74px;
	height: 22px;
	background: rgba(235, 228, 200, .78);
	box-shadow: 0 1px 1px rgba(0, 0, 0, .08);
	z-index: 1;
}
.entry-content figure.wp-block-image:not(.sin-cinta)::before,
.entry-content .wp-caption:not(.sin-cinta)::before { left: -14px; transform: rotate(-38deg); }
.entry-content figure.wp-block-image:not(.sin-cinta)::after,
.entry-content .wp-caption:not(.sin-cinta)::after { right: -14px; transform: rotate(34deg); }

/* galleries: each photo taped, smaller tape */
.entry-content .wp-block-gallery figure.wp-block-image:not(.sin-cinta) { display: block; margin: 8px; padding: 10px 10px 16px; }
.entry-content .wp-block-gallery figure.wp-block-image:not(.sin-cinta)::before,
.entry-content .wp-block-gallery figure.wp-block-image:not(.sin-cinta)::after { width: 46px; height: 14px; top: -6px; }

/* phones: less tilt, tape kept inside the screen */
@media screen and (max-width: 599px) {
	.entry-content figure.wp-block-image:not(.sin-cinta),
	.entry-content .wp-caption:not(.sin-cinta) { transform: rotate(-.6deg); }
	.entry-content figure.wp-block-image:not(.sin-cinta)::before,
	.entry-content .wp-caption:not(.sin-cinta)::before { left: -4px; }
	.entry-content figure.wp-block-image:not(.sin-cinta)::after,
	.entry-content .wp-caption:not(.sin-cinta)::after { right: -4px; }
}