/* กรอบเหลื่อม — เส้นบาง ๆ เยื้องออกไปด้านหลังรูป ให้ความรู้สึกเหมือนแผ่นพิมพ์
   ใส่คลาส tw-frame ที่ Image widget ใน Elementor > Advanced > CSS Classes
   ไม่ใช้ JS เลย และไม่ทำให้เนื้อหาขยับเพราะกรอบเป็น pseudo-element */

.tw-frame {
	--tw-frame-color: #C9A227;
	--tw-frame-gap: 18px;
	--tw-frame-opacity: .55;
	position: relative;
	display: block;
}

.tw-frame::before {
	content: "";
	position: absolute;
	z-index: 0;
	top: var(--tw-frame-gap);
	left: var(--tw-frame-gap);
	right: calc( var(--tw-frame-gap) * -1 );
	bottom: calc( var(--tw-frame-gap) * -1 );
	border: 1px solid var(--tw-frame-color);
	opacity: var(--tw-frame-opacity);
	pointer-events: none;
}

/* ดันเนื้อหาจริงขึ้นมาทับกรอบ ไม่งั้นเส้นจะพาดผ่านหน้ารูป */
.tw-frame > *,
.tw-frame img,
.tw-frame figure {
	position: relative;
	z-index: 1;
}

/* เยื้องไปทางซ้ายแทน — ใช้เวลารูปอยู่ชิดขวาของหน้า */
.tw-frame--left::before {
	left: calc( var(--tw-frame-gap) * -1 );
	right: var(--tw-frame-gap);
}

/* เยื้องขึ้นบนแทนที่จะลงล่าง */
.tw-frame--up::before {
	top: calc( var(--tw-frame-gap) * -1 );
	bottom: var(--tw-frame-gap);
}

.tw-frame--celadon {
	--tw-frame-color: #5E8F84;
}

.tw-frame--ivory {
	--tw-frame-color: #F5F1E6;
}

.tw-frame--solid {
	--tw-frame-opacity: 1;
}

.tw-frame--thick::before {
	border-width: 2px;
}

.tw-frame--tight {
	--tw-frame-gap: 10px;
}

.tw-frame--wide {
	--tw-frame-gap: 28px;
}

@media (max-width: 860px) {
	.tw-frame {
		--tw-frame-gap: 11px;
	}
}

@media print {
	.tw-frame::before {
		display: none;
	}
}