.gallery-cards-wrapper{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(350px,90vw),1fr));place-items:center;gap:var(--spacing-l);margin-block:var(--spacing-l) var(--spacing-xl);padding:var(--spacing-l) var(--spacing-m) var(--spacing-xl)}.card-anchor:active .gallery-card{translate:0 5px}.gallery-card{--s: 63px;--c1: var(--secondary-200);--c2: var(--secondary-300);--c3: var(--secondary-400);width:min(300px,90vw);background:conic-gradient(from 75deg,var(--c1) 15deg,var(--c2) 0 30deg,#0000 0 180deg,var(--c2) 0 195deg,var(--c1) 0 210deg,#0000 0) calc(var(--s) / 2) calc(.5 * var(--s) / tan(30deg)),conic-gradient(var(--c1) 30deg,var(--c3) 0 75deg,var(--c1) 0 90deg,var(--c2) 0 105deg,var(--c3) 0 150deg,var(--c2) 0 180deg,var(--c3) 0 210deg,var(--c1) 0 256deg,var(--c2) 0 270deg,var(--c1) 0 286deg,var(--c2) 0 331deg,var(--c3) 0);background-size:var(--s) calc(var(--s) / tan(30deg));border:3px double var(--primary-500);border-radius:var(--radius-m);box-shadow:var(--inner-shadow-1);transition:translate var(--trs-back-in-out-short)}.card-animated-hover{animation:card-hover 1.9s .5s linear(0,-.004 4.8%,-.02 9.3%,-.124 26.1%,-.126 30.3%,-.104 33.9%,-.026 38.7%,.111 43.1%,.301 47%,.819 55.3%,.969 59.2%,1.07 63.5%,1.118 67.8%,1.127 72.8%,1.108 77.4%,1.019 90.9%,1.004 95.3%,1) both}.card-animated-hover-reverse{animation:card-hover-reverse 1.9s linear(0,-.004 4.8%,-.02 9.3%,-.124 26.1%,-.126 30.3%,-.104 33.9%,-.026 38.7%,.111 43.1%,.301 47%,.819 55.3%,.969 59.2%,1.07 63.5%,1.118 67.8%,1.127 72.8%,1.108 77.4%,1.019 90.9%,1.004 95.3%,1) both}.card-title{position:relative;margin:var(--spacing-ms);padding:var(--spacing-ml);font-family:var(--ff-extra);font-size:var(--fz-l);text-align:center;background-image:linear-gradient(var(--secondary-50) 83%,transparent);border-radius:var(--radius-m) var(--radius-m) 0 0}.card-title span{display:inline-block;translate:0 -.25em}.card-image-wrapper{padding:var(--spacing-ms)}.card-image-wrapper img{height:300px;width:100%;object-fit:cover;border:var(--border-width-s) solid var(--primary-400);border-radius:0 0 var(--radius-m) var(--radius-m)}@media screen and (max-width: 500px){.gallery-cards-wrapper{margin-block:var(--spacing-l) var(--spacing-xxl)}}@keyframes card-hover{0%{transform:perspective(450px) scale(1) rotateX(0)}33%{transform:perspective(450px) scale(1.03) rotateX(-1deg)}to{transform:perspective(450px) scale(1.017) rotateX(2.5deg)}}@keyframes card-hover-reverse{0%{transform:perspective(450px) scale(1.017) rotateX(2.5deg)}66%{transform:perspective(450px) scale(1.03) rotateX(-1deg)}to{transform:perspective(450px) scale(1) rotateX(0)}}
