@media (max-width: 768px) {

  /* Hero-osan välistys */
  #sec-2e45 .u-container-layout {
    padding-bottom: 40px !important;
  }

  /* Kortin ja kuvan väli */
  .u-section-3 {
    margin-top: 30px !important;
  }

  /* Painikkeet koko leveydelle */
  .u-btn {
    display: block;
    width: 100% !important;
    max-width: 300px;
    margin: 0 auto 20px auto;
  }

  /* Johan Grander -kuva */
  #carousel_fd61 img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 20px auto;
  }

  /* Laatikot rivittymään mobiilissa */
  .u-layout-row {
    flex-wrap: wrap !important;
  }


/* Poistetaan NicePage-kovakorkeudet hero-osiosta */
.u-section-1,
.u-section-1 .u-sheet-1 {
  min-height: auto !important;
  height: auto !important;
  display: block !important;
}

/* Varmistetaan että sisältö kasvattaa korkeuden */
.u-section-1 .u-list-1,
.u-section-1 h1,
.u-section-1 h4 {
  margin-bottom: 1.5rem;
}

}


@media (max-width: 991px) {
  /* Hero-osion sisältö pakottaa sectionin venymään */
  .u-section-1 {
    display: flow-root !important; /* varmistaa että sisältö kasvattaa korkeuden */
    overflow: visible !important;
    min-height: 180vh !important;
  }

  /* Jos listan elementit ovat absoluuttisia, muutetaan ne normaaleiksi */
  .u-section-1 .u-list-1,
  .u-section-1 .u-repeater-1 {
    position: static !important;
    margin-bottom: 2rem;
  }
  /* Pakotetaan kaikki repeater-itemit mukaan normaalivirtaan */
  .u-section-1 .u-repeater-1,
  .u-section-1 .u-repeater-1 > div {
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    display: block !important;
    width: 100% !important;
    margin: 1rem 0 !important;
  }

}


/* Palautetaan normaalinäkymän arvo desktopille ja tabletille */
@media (min-width: 768px) {
  .u-section-7 {
    margin-top: 0 !important;
  }
}

/* Sovelletaan vain mobiilissa */
@media (max-width: 767px) {
  .u-section-7 {
    margin-top: -300px !important;
  }
}