.hero-carousel {
  position: relative;
  width: 100%;
  max-width: 600px; /* Tilpas størrelsen så den passer til miniature-stilen */
  margin: 0 auto;
  overflow: hidden;
}

.carousel-container {
  display: flex;
  align-items: center;
  position: relative;
}

.carousel-slides {
  width: 100%;
}

.slide {
  display: none; /* Skjul alle billeder som standard */
}

.slide.active {
  display: block; /* Vis kun det aktive billede */
}

.slide img {
  width: 100%;
  height: auto;
  border-radius: 8px; /* Bløde hjørner klæder ofte kunstbilleder */
}

/* Stil til pilene */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
  z-index: 10;
}

.prev { left: 10px; }
.next { right: 10px; }

body {
  font-family: 'Montserrat', sans-serif;
  background-color: #faf7f2; /* En blød, brækket hvid/creme i stedet for helt hård hvid */
  color: #4a3f35;            /* En mørkebrun/jordslået farve i stedet for helt sort tekst */
}

h1, h2 {
  font-family: 'Playfair Display', serif;
  font-weight: 400;          /* Gør overskriften tynd og elegant i stedet for tyk/bold */
  letter-spacing: 1px;       /* Giver lidt ekstra luft mellem bogstaverne */
}

/* Styling for alle dine links */
a {
  color: #4a3f35;          /* Gør linket mørkebrunt (eller den farve du ønsker) */
  text-decoration: none;   /* Fjerner den irriterende understregning */
  transition: color 0.3s;  /* Gør spillet i farven blødt, når musen holdes over */
}

/* Hvad der sker, når man holder musen over linket (Hover) */
a:hover {
  color: #c2a68b;          /* Skifter til en blødere boho/jordfarve, når man peger på det */
  text-decoration: underline; /* Valgfrit: Sætter understregningen på igen, men kun ved hover */
}