/* SonicCity – Places image gallery */

.ag-placeGallery{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:14px;
}

@media (max-width: 575.98px){
  .ag-placeGallery{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
  }
}

.ag-placeCard{
  --d: calc(var(--i, 0) * 70ms);
  position:relative;
  display:block;
  text-decoration:none;
  color:inherit;
  border-radius:30px;
  overflow:hidden;
  border:0;
  background:#fff;
  box-shadow:0 16px 38px rgba(24,30,75,.10);
  transform:translateY(0);
  transition:transform .22s ease, box-shadow .22s ease, opacity .22s ease;
}

.ag-hasGalleryJS .ag-placeCard{
  opacity:0;
  transform:translateY(8px);
}

.ag-hasGalleryJS .ag-placeCard.is-in{
  opacity:1;
  transform:translateY(0);
  transition-delay:var(--d);
}

.ag-placeCard:focus-visible{
  outline:3px solid rgba(59,130,246,.35);
  outline-offset:2px;
}

.ag-placeCard:hover{
  transform:translateY(-5px);
  box-shadow:0 24px 68px rgba(24,30,75,.18);
}

.ag-placeCard-media{
  position:relative;
  aspect-ratio:4/3;
  background:
    radial-gradient(420px 240px at 25% 20%, rgba(75,123,236,.22) 0%, rgba(75,123,236,0) 60%),
    radial-gradient(420px 240px at 80% 35%, rgba(59,130,246,.18) 0%, rgba(59,130,246,0) 62%),
    linear-gradient(180deg, rgba(246,248,255,1) 0%, rgba(255,255,255,1) 100%);
}

.ag-placeCard-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(11,22,63,.72), rgba(11,22,63,0) 60%);
  opacity:.86;
  pointer-events:none;
}

.ag-placeCard-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  opacity:0;
  transform:scale(1.03);
  transition:opacity .35s ease, transform .8s ease;
}

.ag-placeCard-img.is-loaded{
  opacity:1;
  transform:scale(1);
}

.ag-placeCard-body{
  position:absolute;
  inset:auto 0 0 0;
  padding:12px 12px 12px;
  z-index:1;
  color:#fff;
}

.ag-placeCard-title{
  font-weight:800;
  line-height:1.15;
  text-shadow:0 8px 20px rgba(0,0,0,.35);
}

.ag-placeCard-meta{
  margin-top:2px;
  font-size:12px;
  font-weight:600;
  opacity:.92;
  text-shadow:0 8px 20px rgba(0,0,0,.35);
}

@media (prefers-reduced-motion: reduce){
  .ag-placeCard,
  .ag-placeCard-img{
    transition:none !important;
  }
  .ag-hasGalleryJS .ag-placeCard{
    opacity:1;
    transform:none;
  }
}