.eris-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  min-height: 40vh;
  padding: 20px;
  box-sizing: border-box;
  background: linear-gradient(90deg, rgba(107, 88, 49, 1) 0%, rgba(181, 153, 98, 1) 50%, rgba(107, 88, 49, 1) 100%);
}

/* Left Column (Slideshow) */
.eris-slideshow {
  flex: 0 0 auto;
  position: relative;
  width: 527px;
  height: 400px;
  margin: 10px;
  overflow: hidden;
  border-radius: 8px;

  
}

.eris-slide {
  display: none;
  width: 100%;
  height: 100%;
}

.eris-slide img, 
.eris-slide iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.eris-active {
  display: block;
  animation: eris-fade 1s;
}

@keyframes eris-fade {
  from {opacity: 0.4;}
  to {opacity: 1;}
}

/* CSS Arrows (thin 2px, bigger) */
.eris-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.3s;
  z-index: 10;
}

.eris-arrow:hover {
  opacity: 1;
}

.eris-arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: translate(-50%, -50%) rotate(45deg);
}

.eris-left {
  left: 10px;
}

.eris-left::before {
  transform: translate(-50%, -50%) rotate(-135deg);
}

.eris-right {
  right: 10px;
}

.eris-right::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

/* Right Column (Static Text) */
.eris-text-box {
  flex: 1 1 60%;
  max-width: 600px;
  margin: 10px;
  margin-left: 100px; /* shift text 100px right */
}

.eris-text-box h2 {
  font-size: 25px;
  letter-spacing: 1px;
  margin-bottom: 15px;
  color: #5e4006;
}

.eris-text-box p {
font-family: 'BPGMrgvlovaniCaps2010';
  font-size: 16px;
  line-height: 1.4;
  color: #fff;
  font-weight:400;
}

/* Responsive */
@media (max-width: 768px) {
  .eris-container {
    flex-direction: column;
  }
  .eris-slideshow {
    width: 95%;
    height: auto;
  }
  .eris-slide img, 
  .eris-slide iframe {
    height: auto;
  }
  .eris-text-box {
    flex: 1 1 100%;
    max-width: 100%;
    margin-left: 0;
    margin-top: 20px;
  }
  .eris-arrow {
    width: 30px;
    height: 30px;
  }
  .eris-arrow::before {
    width: 15px;
    height: 15px;
  }
}