/*
-------------------------------------------
wf-sis-event-hero.css
-------------------------------------------

  Beskrivning: Stilregler för hero på ett evenemang
  på Sommar i Skeppsbron
  Skapad av: Webbfröken AB
  Webbadress: https://webbfroken.se

------------------------------------------- */


/*
-------------------------------------------
Evenemang - Hero - TODO GÅ IGENOM
------------------------------------------- */

.wf-event-hero {
  background-size: cover;
  height: 60vh;
  margin: calc(var(--wf-spacing-120) * -2) calc(var(--wf-page-edge-spacing) * -1) var(--wf-spacing-120);
  min-height: 640px; /* TODO */
}

.wf-event-hero-flowers-left,
.wf-event-hero-flowers-right {
  background-repeat: no-repeat;
  height: 100%;
  width: 100%;
}

.wf-event-hero-flowers-left {
  background-image: url('/images/18.71acb9fb195f05d5571f60/1743352818854/main-top-left.webp');
  background-position: top left;
  background-repeat: no-repeat;
}

.wf-event-hero-flowers-right {
  background-image: url('/images/18.71acb9fb195f05d5571f5e/1743352765199/main-top-right.webp');
  background-position: top right;
  background-repeat: no-repeat;
}


/* Specialare i desktop */  /* TODO */
@media (max-width: 1920px) {
  .wf-event-hero-flowers-right {
    background-size: 44%;
  }
  .wf-event-hero-flowers-left {
    background-size: 24%;
  }
}

@media (max-width: 1820px) {
  .wf-event-hero-flowers-right {
    background-size: 40%;
  }
  .wf-event-hero-flowers-left {
    background-size: 20%;
  }
}

@media (max-width: 1720px) {
  .wf-event-hero-flowers-left {
    background: none;
  }
  .wf-event-hero-flowers-right {
    background-size: 60%;
  }
}

@media (max-width: 1440px) {
  .wf-event-hero {
    min-height: initial;
  }
}


/* Mobil & Läsplatta */
@media (max-width: 1024px) {
  .wf-event-hero-flowers-left {
    background: none;
  }
}


/* Mobil */
@media (max-width: 800px) {
  .wf-event-hero {
    height: 30vh;
  }
  .wf-event-hero-flowers-left {
    background: none;
  }
  .wf-event-hero-flowers-right {
    background-size: 60%; /* TODO */
  }
}



/*
-------------------------------------------
Läsplatta
------------------------------------------- */

@media screen and (max-width: 1024px) {
}



/*
-------------------------------------------
Mobil
------------------------------------------- */

@media screen and (max-width: 767px) {
}