@import 'basic.css';
.container {
    max-width:1100px; 
    width: 90%;
}
.hero {
    background:var(--accent-light);
    padding:1rem;
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-sm);
    text-align:center;
    margin-bottom:1rem;
}
.hero h1 {
    margin:0 0 .25rem 0;
    font-size:1.6rem;
}
.hero p {
    margin:0;
    color:#6a4935;
}

/* Галерея: адаптивная плитка */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;}
/* карточка, чтобы скрывать выступающие части картинки */
.grid-item {
  border-radius: var(--radius-sm);
  background: #fff;
  box-shadow: var(--shadow-sm);
  overflow: hidden; /* важно для обрезки */
}

/* обёртка даёт фиксированное соотношение сторон */
.grid-item .img-wrap {
  width: 100%;
  aspect-ratio: 4 / 3; /* или 16/9, 1/1 и т.д. */
  display: block;
}

/* картинка занимает всю обёртку и обрезается по object-fit */
.grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .18s, opacity .18s;
}

.grid-item img:hover {
  transform: scale(1.03);
  opacity: .95;
}

@media (max-width: 900px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width:560px){.gallery{grid-template-columns:repeat(1,1fr);} .container{margin: 1rem;}}

    /* Адаптив */
    @media (max-width:900px){.grid{grid-template-columns:repeat(2,1fr);}}
    @media (max-width:560px){.grid{grid-template-columns:repeat(1,1fr);} .container{margin: 1rem;}}
    /* Fancybox tweaks */
.fancybox-inner {
  bottom: 10%;
  left: 15%;
  position: absolute;
  right: 15%;
  top: 10%;
  background-color: #000;
  border-radius: 10px;
}
.fancybox-button--fsenter {
  border-bottom-left-radius: 10px !important;
}
.fancybox-button--close {
  border-top-right-radius: 10px !important;
}
.fancybox-navigation .fancybox-button--arrow_right,
.fancybox-navigation .fancybox-button--arrow_left {
  padding: 0;
}
.fancybox-navigation .fancybox-button {
  height: 44px;
  aspect-ratio: 1/1 !important;
  width: auto !important;
  border-radius: 10px;
  top: calc(50% - 22px);
}
.fancybox-infobar {
  padding: 0 15px;
}