.hero-carousel .owl-item img.hero-photo--facade {
  object-position: center 50%;
}

.hero-carousel .owl-item img.hero-photo--buffet {
  object-position: center 55%;
}

.hero-carousel .owl-item img.hero-photo--experience {
  object-position: center 62%;
}

.hero-carousel .owl-item img.hero-photo--owners {
  object-position: center 46%;
}

.photo-about {
  background-position: center 45%;
}

.photo-focus-45 {
  --photo-focus: 45%;
}

.photo-focus-48 {
  --photo-focus: 48%;
}

.photo-focus-50 {
  --photo-focus: 50%;
}

.photo-focus-52 {
  --photo-focus: 52%;
}

.photo-focus-54 {
  --photo-focus: 54%;
}

.photo-focus-56 {
  --photo-focus: 56%;
}

.photo-focus-58 {
  --photo-focus: 58%;
}

.environment-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  margin-top: 1rem;
}

.environment-card,
.environment-modal-thumb,
.environment-modal-close,
.environment-modal-nav {
  appearance: none;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
}

.environment-card {
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 12px;
  cursor: pointer;
}

.environment-card .environment-thumb {
  display: block;
  width: 100%;
  height: 100% !important;
  border-radius: inherit;
  transition: transform 400ms ease;
}

.environment-card:hover .environment-thumb {
  transform: scale(1.04);
}

.environment-card:focus-visible,
.environment-modal-thumb:focus-visible,
.environment-modal-close:focus-visible,
.environment-modal-nav:focus-visible {
  outline: 3px solid #c8231d;
  outline-offset: 3px;
}

.environment-thumb {
  height: clamp(92px, 10vw, 132px) !important;
  border-radius: 12px;
  object-fit: cover;
  object-position: center var(--photo-focus, 50%);
}

.environment-modal-close {
  z-index: 2;
  color: #fff;
  cursor: pointer;
}

#myModal {
  z-index: 1100;
}

.environment-modal-nav {
  z-index: 1;
  color: #fff;
  cursor: pointer;
}

.environment-modal-prev {
  left: 2%;
}

.environment-modal-next {
  left: 98%;
}

.environment-modal-thumbs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  padding: 8px;
  background: #000;
}

.environment-modal-thumb {
  overflow: hidden;
  border-radius: 5px;
  cursor: pointer;
}

.environment-modal-thumb .environment-thumb {
  display: block;
  width: 100%;
  height: 84px !important;
  border-radius: inherit;
}

.mySlides {
  max-height: 72vh;
  object-fit: contain;
}

#carouselExampleIndicators .carousel-inner,
#carouselExampleIndicators2 .carousel-inner,
#carouselExampleIndicators3 .carousel-inner,
#carouselExampleIndicators4 .carousel-inner {
  height: 360px;
  overflow: hidden;
}

#carouselExampleIndicators .carousel-item,
#carouselExampleIndicators2 .carousel-item2,
#carouselExampleIndicators3 .carousel-item3,
#carouselExampleIndicators4 .carousel-item4 {
  height: 360px;
}

.food-carousel-image,
.sucos-carousel .sucos-carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center var(--photo-focus, 50%);
}

@media (max-width: 767px) {
  .hero-carousel .owl-item img.hero-photo--owners {
    background-color: #606C38;
    background-image:
      radial-gradient(circle at 18% 18%, rgba(139, 157, 131, 0.9), transparent 42%),
      radial-gradient(circle at 82% 76%, rgba(176, 139, 110, 0.72), transparent 38%);
    object-fit: contain;
    object-position: center;
  }

  .hero-carousel .owl-nav {
    right: 84px;
  }

  .environment-thumb {
    height: 92px !important;
    border-radius: 8px;
  }

  .environment-grid {
    gap: 8px;
  }

  .environment-card {
    border-radius: 8px;
  }

  .environment-modal-thumb .environment-thumb {
    height: 58px !important;
  }
}