body{
  background-image:
    linear-gradient(rgba(244,246,242,.82), rgba(244,246,242,.82)),
    url("./symbol-zelena.png");
}

.hero-carousel{
  position:relative;
  width:100%;
  max-width:620px;
  margin-inline:auto;
  aspect-ratio:16 / 9;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--accent-dark);
  box-shadow:var(--shadow);
}

.hero-carousel::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(transparent 62%, rgba(0,0,0,.36));
  pointer-events:none;
}

.hero-carousel__track{
  position:relative;
  width:100%;
  height:100%;
}

.hero-carousel__slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity 1.2s ease;
}

.hero-carousel__slide.is-active{
  opacity:1;
}

.hero-carousel__slide img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.hero-carousel__slide:first-child img{
  object-position:28% 75%;
}

.hero-carousel__slide:nth-child(2) img{
  object-position:center;
}

.hero-carousel__slide img.gallery-focus-lower{
  object-position:center 62%;
}

.hero-carousel__controls{
  position:absolute;
  z-index:3;
  right:16px;
  bottom:16px;
  display:flex;
  align-items:center;
  padding:4px;
  border:1px solid rgba(255,255,255,.25);
  border-radius:999px;
  background:rgba(20,31,20,.48);
  backdrop-filter:blur(6px);
}

.hero-carousel__button,
.hero-carousel__dot{
  display:inline-grid;
  place-items:center;
  flex:0 0 auto;
  margin:0;
  border:0;
  color:#fff;
  background:transparent;
  cursor:pointer;
}

.hero-carousel__button{
  width:32px;
  height:32px;
  border-radius:50%;
  font:700 22px/1 system-ui,sans-serif;
}

.hero-carousel__button[data-carousel-toggle]{
  font-size:14px;
}

.hero-carousel__button[data-carousel-previous],
.hero-carousel__button[data-carousel-next],
.hero-carousel__dots{
  display:none;
}

.hero-carousel__button:hover,
.hero-carousel__button:focus-visible{
  background:rgba(255,255,255,.2);
  outline:none;
}

.hero-carousel__dots{
  display:none;
  gap:7px;
  align-items:center;
}

.hero-carousel__dot{
  width:9px;
  height:9px;
  padding:0;
  border-radius:50%;
  background:rgba(255,255,255,.48);
}

.hero-carousel__dot[aria-current="true"]{
  background:#fff;
  transform:scale(1.25);
}

.contact-line,
.contact-line a{
  overflow-wrap:anywhere;
}

#contact .two-col > *{
  min-width:0;
}

.reviews-grid{
  display:grid;
  gap:14px;
  margin-top:16px;
}

.review-card{
  min-width:0;
  padding:18px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
}

.review-rating{
  display:block;
  color:#d49a24;
  font-size:17px;
  letter-spacing:.08em;
}

.review-card blockquote{
  margin:11px 0 14px;
  color:var(--muted);
  font-size:14px;
  line-height:1.55;
}

.review-author{
  display:block;
  color:#273229;
  font-size:13px;
}

.review-source{
  display:block;
  margin-top:2px;
  color:#7a847c;
  font-size:12px;
}

.reviews-link{
  margin-top:16px;
  font-size:14px;
  font-weight:700;
}

.reviews-link a{
  color:var(--accent-dark);
  text-decoration:underline;
  text-underline-offset:3px;
}

#autokemp{
  border-top:4px solid var(--accent);
}

#pitches,
#location{
  background:rgba(255,255,255,.96);
}

footer{
  max-width:none;
  margin:38px 0 0;
  padding:34px max(16px, calc((100% - 760px) / 2)) 42px;
  background:#1f2c21;
  color:#d7e0d8;
}

footer strong,
footer a{
  color:#fff;
}

footer a{
  overflow-wrap:anywhere;
}

@media (max-width:520px){
  .hero-carousel{
    aspect-ratio:4 / 3;
  }

  .hero-carousel__controls{
    right:50%;
    bottom:10px;
    transform:translateX(50%);
  }

  footer{
    padding-bottom:36px;
  }
}

@media (min-width:700px){
  .reviews-grid{
    grid-template-columns:repeat(3,1fr);
  }
}

@media (min-width:960px){
  .container{
    max-width:1120px;
  }

  .stack{
    grid-template-columns:repeat(12,minmax(0,1fr));
    gap:22px;
  }

  #autokemp{
    grid-column:1 / 7;
  }

  .stack > .hero-carousel{
    grid-column:7 / -1;
    width:100%;
    max-width:none;
    min-height:100%;
    aspect-ratio:auto;
  }

  #pitches{
    grid-column:1 / 8;
  }

  #location{
    grid-column:8 / -1;
  }

  #stay{
    grid-column:1 / -1;
  }

  #faq{
    grid-column:1 / 5;
  }

  #reviews{
    grid-column:5 / -1;
  }

  #contact{
    grid-column:1 / -1;
  }
}

@media (prefers-reduced-motion:reduce){
  .hero-carousel__slide{
    transition:none;
  }
}