/*
-------------------------------------------
wf-template-huvudingang.css
-------------------------------------------

  Beskrivning: Stilregler för mallen Huvudingång
  Skapad av: Webbfröken AB
  Webbadress: https://webbfroken.se

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


/*
-------------------------------------------
Mallen Huvudingång
------------------------------------------- */

/* Bild till höger */
.sv-template-huvudingang main > div > .sv-vertical.sv-layout {
  position: relative;
}

.sv-template-huvudingang main > div > .sv-vertical.sv-layout .sv-image-portlet {
  position: absolute;
  top: calc(var(--wf-spacing-80) * -1);
  right: calc(var(--wf-page-edge-spacing) * -1);
  bottom: 0;
  margin-bottom: var(--wf-spacing-120);
}

.sv-template-huvudingang main > div > .sv-vertical.sv-layout .sv-image-portlet img {
  height: 100%;
  width: 36vw;
  max-height: none;
  max-width: none;
  object-fit: cover;
  border-radius: var(--wf-radius-large) 0 0 var(--wf-radius-large);
}

/* Ser till att bilden håller kvar sin position i redigeringsläget */
.sv-edit-mode.sv-template-huvudingang main > div > .sv-vertical.sv-layout .sv-image-portlet {
  position: absolute !important;
}


/*
-------------------------------------------
Animeringar
------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {

  .sv-template-huvudingang main > div > .sv-vertical.sv-layout .sv-image-portlet {
    opacity: 0;
    animation: fadeInFromRight 1s ease-out forwards;
  }

  @keyframes fadeInFromRight {
    0% {
      opacity: 0;
      transform: translateX(20px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/*
-------------------------------------------
Mindre skärm
------------------------------------------- */

@media screen and (max-width: 1920px) {
  .sv-template-huvudingang main > div > .sv-vertical.sv-layout .sv-image-portlet img {
    width: 34vw;
  }
}

@media screen and (max-width: 1600px) {
  .sv-template-huvudingang main > div > .sv-vertical.sv-layout .sv-image-portlet img {
    width: 31vw;
  }
}

@media screen and (max-width: 1440px) {
  .sv-template-huvudingang main > div > .sv-vertical.sv-layout .sv-image-portlet img {
    width: 30vw;
  }
}


/*
-------------------------------------------
Läsplatta + Mobil
------------------------------------------- */

@media screen and (max-width: 1024px) {
  .sv-template-huvudingang main > div > .sv-vertical.sv-layout .sv-image-portlet {
    display: none;
  }

  .sv-template-huvudingang main > div > .sv-vertical.sv-layout .sv-grid-1436 .sv-column-8 {
    width: 100%;
  }
}