:root{
  --g:1rem;
  --max:1200px;
  --accent:#0ea5a4;
  --r:8px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  background:#f7f7fb;
  color:#111827;
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

.container{
  width:100%;
  max-width:var(--max);
  margin:0 auto;
  padding:0 1rem;
}

.site-header{
  background:linear-gradient(90deg,var(--accent),#7dd3fc);
  color:#fff;
  padding:1rem 0;
}
.site-header h1{margin:0;font-size:1.25rem}
.tagline{margin:0.25rem 0 0;font-size:0.9rem;opacity:0.95}

.site-footer{
  margin-top:auto;
  background:#0f1724;
  color:#fff;
  padding:1rem 0;
  text-align:center;
  font-size:0.95rem;
}

.site-main{padding:1.25rem 0}

.gallery{
  display:flex;
  flex-wrap:wrap;
  gap:var(--g);
  align-items:flex-start;
  justify-content:center;
}

.media-item{
  background:#fff;
  border-radius:var(--r);
  overflow:hidden;
  box-shadow:0 1px 3px rgba(16,24,40,0.06);
  display:flex;
  flex-direction:column;
}

.media-item img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
}

.embed{
  width:100%;
  aspect-ratio:16/9;
  background:#000;
}
.embed iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
}

.media-item figcaption{
  padding:0.6rem 0.75rem;
  font-size:0.9rem;
  color:#6b7280;
}

.gallery .media-item{flex:1 1 100%}

.img1{order:1}
.vid1{order:2}
.img2{order:3}
.vid2{order:4}
.img3{order:5}
.vid3{order:6}

@media (min-width:600px){
  .gallery .media-item{flex:1 1 calc(50% - var(--g))}
  .vid1{order:1}
  .vid2{order:2}
  .vid3{order:3}
  .img1{order:4}
  .img2{order:5}
  .img3{order:6}
}

@media (min-width:900px){
  .gallery .media-item{flex:1 1 calc(33.333% - var(--g))}
  .img1{order:1}
  .vid1{order:2}
  .img2{order:3}
  .vid2{order:4}
  .img3{order:5}
  .vid3{order:6}
}

@media (min-width:1200px){
  .gallery .media-item{flex:1 1 calc(33.333% - var(--g))}
  .vid2{order:1}
  .vid1{order:2}
  .vid3{order:3}
  .img3{order:4}
  .img1{order:5}
  .img2{order:6}
}

@media (max-width:599px){
  .site-header h1{font-size:1.1rem}
}