/* 線上祈福 */
@import url("https://fonts.googleapis.com/css2?family=Kalam:wght@400&display=swap");

#gallery {
	position: relative;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 15px;
	max-width: 100vw;
	padding: 20px;
	-webkit-perspective: 0;
	perspective: 0;
  }
  #gallery figure:nth-child(7n) {
	--duration: 1s;
	--pin-color: #0ff;
  }
  #gallery figure:nth-child(7n + 1) {
	--duration: 1.8s;
	--pin-color: #dbdb2b;
  }
  #gallery figure:nth-child(7n + 2) {
	--duration: 1.3s;
	--pin-color: #00f077;
  }
  #gallery figure:nth-child(7n + 3) {
	--duration: 1.5s;
	--pin-color: #ea4597;
  }
  #gallery figure:nth-child(7n + 4) {
	--duration: 1.1s;
	--pin-color: #6f9ac6;
  }
  #gallery figure:nth-child(7n + 5) {
	--duration: 1.6s;
	--pin-color: #9452d7;
  }
  #gallery figure:nth-child(7n + 6) {
	--duration: 1.2s;
	--pin-color: #ff7f00;
  }
  #gallery figure:nth-child(3n) {
	--angle: 3deg;
  }
  #gallery figure:nth-child(3n + 1) {
	--angle: -3.3deg;
  }
  #gallery figure:nth-child(3n + 2) {
	--angle: 2.4deg;
  }
  #gallery figure:nth-child(odd) {
	--direction: alternate;
  }
  #gallery figure:nth-child(even) {
	--direction: alternate-reverse;
  }
  #gallery figure {
	--angle: 3deg;
	--count: 5;
	--duration: 1s;
	--delay: calc(-0.5 * var(--duration));
	--direction: alternate;
	--pin-color: red;
  
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0.5rem;
	border-radius: 30px;
	box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
	box-shadow: 0 8px 10px rgba(0, 0, 0, 0.5);
	width: 100%;
	height: auto;
	aspect-ratio: 1 /2;
	text-align: center;
	color:brown;
	background-color: white;
	/* background-image: url("https://images.unsplash.com/photo-1603484477859-abe6a73f9366?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTM0NTk4ODN8&ixlib=rb-4.0.3&q=100&w=800"); */
	background-size: cover;
	background-position: center;
	background-blend-mode: multiply;
	/* filter: brightness(125%); */
  
	transform-origin: center 0.22rem;
	will-change: transform;
	break-inside: avoid;
	overflow: hidden;
	outline: 1px solid transparent;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
  }
  #gallery figure.active {
	animation-duration: var(--duration), 1.5s;
	animation-delay: var(--delay),
	  calc(var(--delay) + var(--duration) * var(--count));
	animation-timing-function: ease-in-out;
	animation-iteration-count: var(--count), 1;
	animation-direction: var(--direction), normal;
	animation-fill-mode: both;
	animation-name: swing, swingEnd;
  }
  #gallery figure:after {
	position: absolute;
	top: 0.22rem;
	left: 50%;
	width: 0.7rem;
	height: 0.7rem;
	content: "";
	background: var(--pin-color);
	border-radius: 50%;
	box-shadow: -0.1rem -0.1rem 0.3rem 0.02rem rgba(0, 0, 0, 0.7) inset;
	filter: drop-shadow(0.25rem 0.13rem 0.15rem rgba(0, 0, 0, 0.7));
	transform: translateZ(0);
  }
  figure figcaption {
	position: absolute;
	bottom: 25px;
	left: 0;
	right: 0;
	font-size: 18px;
	font-weight: 400;
	color: #888;
	line-height: 1;
	/*
	background: rgba(0, 0, 0, 0.03);
	backdrop-filter: blur(3px);
	
	text-stroke: 0.5px rgba(20, 20, 20, 0.5);
	  -webkit-text-stroke: 0.5px rgba(20, 20, 20, 0.5);
	*/
	filter: invert(1);
	mix-blend-mode: difference;
	transform: translateZ(0);
  }
  figure h2 {
	color: brown;
	font-size: 24px;
  }
  figure p {
	font-size: 17px;
  }
  figure small {
	font-size: 15px;
  }
  figure svg {
	width: 10px;
  }
  @keyframes swing {
	0% {
	  transform: rotate3d(0, 0, 1, calc(-1 * var(--angle)));
	}
	100% {
	  transform: rotate3d(0, 0, 1, var(--angle));
	}
  }
  @keyframes swingEnd {
	to {
	  transform: rotate3d(0, 0, 1, 0deg);
	}
  }
  #info {
	position: relative;
	text-align: center;
	z-index: 1;
  }
  #info a {
	font-size: 1.1rem;
  }
  @media (min-width: 800px) {
	#gallery {
	  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	}
  }