/* ==========================================================================
   Hakastar - laajennetun sisallon tyylit
   Erillinen tiedosto, jotta Webflown vientitiedostoja ei tarvitse muokata.
   Ladataan viimeisena, joten nama saannot voittavat.

   Varilinja: kaikki leipateksti on sivuston tummansinista #002648.
   Oranssia ei kayteta tekstissa, vain hienovaraisissa rajoissa.
   ========================================================================== */

:root {
  --hk-teksti: #002648;
  --hk-viiva: #dfe3e8;
  --hk-pohja-vaalea: #f6f8f9;
}

.hk-sisalto {
  font-family: Montserrat, sans-serif;
  color: var(--hk-teksti);
  font-size: 1rem;
  font-weight: 400;
  line-height: 175%;
}

/* Kaikki sisallon tekstielementit samaan variin. Webflown vientitiedostoissa
   on useita globaaleja saantoja (esim. "ul, ol"), jotka muuten vuotavat lapi. */
.hk-sisalto,
.hk-sisalto p,
.hk-sisalto li,
.hk-sisalto ul,
.hk-sisalto ol,
.hk-sisalto h3,
.hk-sisalto h4,
.hk-sisalto strong,
.hk-sisalto em,
.hk-sisalto span,
.hk-sisalto div {
  color: var(--hk-teksti);
}

.hk-sisalto p {
  color: var(--hk-teksti);
  font-size: 1rem;
  margin: 0 0 1.4rem;
  max-width: 68ch;
}

.hk-sisalto p:last-child {
  margin-bottom: 0;
}

/* Korostus erottuu painolla, ei varilla */
.hk-sisalto strong {
  color: var(--hk-teksti);
  font-weight: 600;
}

/* ------ Valiotsikot ------ */

.hk-sisalto h3 {
  font-family: Montserrat, sans-serif;
  color: var(--hk-teksti);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 145%;
  margin: 3.75rem 0 1.1rem;
}

.hk-sisalto h3:first-child {
  margin-top: 0;
}

/* ------ Luettelot: sama koko ja vari kuin leipatekstissa ------ */

/* Webflow asettaa globaalin saannon "ul, ol { color: <oranssi> }".
   Kumotaan se tassa, muuten listat periytyvat vaarilla varilla. */
.hk-lista,
.hk-sisalto ul,
.hk-sisalto ol {
  color: var(--hk-teksti);
  margin: 0 0 1.4rem;
  padding: 0;
  list-style: none;
  max-width: 68ch;
}

.hk-lista li {
  position: relative;
  color: var(--hk-teksti);
  font-size: 1rem;
  line-height: 175%;
  padding-left: 1.35rem;
  margin-bottom: .75rem;
}

.hk-lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .68em;
  width: 5px;
  height: 5px;
  background: var(--hk-teksti);
  border-radius: 50%;
}

.hk-lista li:last-child {
  margin-bottom: 0;
}

/* ------ Nostolaatikko: vaalea pohja, ei varillista reunaa ------ */

.hk-faktalaatikko {
  background: var(--hk-pohja-vaalea);
  border: 1px solid var(--hk-viiva);
  padding: 2rem 2.25rem;
  margin: 2.5rem 0;
  max-width: 68ch;
}

.hk-faktalaatikko p {
  margin-bottom: .7rem;
}

.hk-faktalaatikko p:last-child {
  margin-bottom: 0;
}

/* ------ Linkit: tumma teksti, alleviivaus erottimena ------ */

.hk-sisalto a {
  color: var(--hk-teksti);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.hk-sisalto a:hover,
.hk-sisalto a:focus {
  text-decoration-thickness: 2px;
}

/* ==========================================================================
   Usein kysytyt kysymykset
   Otsikko vasemmassa reunassa, kysymykset kahdessa sarakkeessa.
   ========================================================================== */

.hk-faq {
  background: #ffffff;
  padding: 5rem 4rem;
}

.hk-faq-container {
  width: 100%;
}

.hk-faq-otsikko {
  font-family: Montserrat, sans-serif;
  color: var(--hk-teksti);
  text-align: left;
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 140%;
  margin: 0 0 2.5rem;
}

.hk-faq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 4rem;
  row-gap: 0;
  align-items: start;
}

.hk-faq-item {
  border-top: 1px solid var(--hk-viiva);
}

/* Alaviiva vain kahdelle viimeiselle, jotta ruudukko sulkeutuu siististi */
.hk-faq-item:nth-last-child(-n+2) {
  border-bottom: 1px solid var(--hk-viiva);
}

.hk-faq-item summary {
  font-family: Montserrat, sans-serif;
  color: var(--hk-teksti);
  font-size: 1rem;
  font-weight: 500;
  line-height: 150%;
  padding: 1.35rem 2.5rem 1.35rem 0;
  cursor: pointer;
  list-style: none;
  position: relative;
}

.hk-faq-item summary::-webkit-details-marker {
  display: none;
}

.hk-faq-item summary::after {
  content: "+";
  position: absolute;
  right: .25rem;
  top: 1.25rem;
  font-size: 1.35rem;
  font-weight: 400;
  color: var(--hk-teksti);
  line-height: 1;
}

.hk-faq-item[open] summary::after {
  content: "\2013";
}

.hk-faq-item summary:focus-visible {
  outline: 2px solid var(--hk-teksti);
  outline-offset: -2px;
}

.hk-faq-vastaus {
  font-family: Montserrat, sans-serif;
  color: var(--hk-teksti);
  font-size: 1rem;
  line-height: 160%;
  padding: 0 2.5rem 1.5rem 0;
}

.hk-faq-vastaus p {
  color: var(--hk-teksti);
  margin: 0 0 .9rem;
}

.hk-faq-vastaus p:last-child {
  margin-bottom: 0;
}

.hk-faq-vastaus a {
  color: var(--hk-teksti);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ==========================================================================
   Kevyt CTA sisallon perassa
   ========================================================================== */

.hk-cta {
  background: var(--hk-pohja-vaalea);
  border: 1px solid var(--hk-viiva);
  padding: 2.5rem 2.75rem;
  margin: 4rem 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.hk-cta-teksti {
  max-width: 62ch;
}

.hk-cta-otsikko {
  font-family: Montserrat, sans-serif;
  color: var(--hk-teksti);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 140%;
  margin: 0 0 .5rem;
}

.hk-cta-teksti p {
  font-family: Montserrat, sans-serif;
  color: var(--hk-teksti);
  font-size: 1rem;
  line-height: 160%;
  margin: 0;
}

/* ==========================================================================
   Responsiivisuus
   ========================================================================== */

@media (max-width: 991px) {
  .hk-faq {
    padding: 3.5rem 2rem;
  }
  .hk-faq-otsikko {
    font-size: 2rem;
    margin-bottom: 2rem;
  }
  .hk-faq-grid {
    column-gap: 2.5rem;
  }
  .hk-cta {
    padding: 2rem;
  }
}

@media (max-width: 767px) {
  .hk-faq {
    padding: 3rem 1.25rem;
  }
  .hk-faq-otsikko {
    font-size: 1.8rem;
  }
  /* Yksi sarake mobiilissa */
  .hk-faq-grid {
    grid-template-columns: 1fr;
  }
  .hk-faq-item:nth-last-child(-n+2) {
    border-bottom: none;
  }
  .hk-faq-item:last-child {
    border-bottom: 1px solid var(--hk-viiva);
  }
  .hk-sisalto h3 {
    font-size: 1.1rem;
  }
  .hk-cta {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.75rem 1.5rem;
  }
  .hk-cta .rt-button {
    width: 100%;
  }
}

/* ==========================================================================
   CTA-napin hover sisaltolohkoissa

   Webflown oma nappirakenne (.rt-button) saa hover-efektinsa IX2-skriptista.
   Toistetaan sama efekti CSS:lla, jotta nappi toimii myos ilman
   interaktioskriptia: harmaa peittopinta liukuu vinosti sisaan ja
   tekstikerros vaihtuu valkoiseksi.
   ========================================================================== */

.hk-cta .rt-button {
  width: auto;
  max-width: none;
}

.hk-cta .rt-button .rt-button-overlay {
  transition: width .4s ease;
}

.hk-cta .rt-button .rt-button-text.rt-2 {
  transition: opacity .3s ease;
}

.hk-cta .rt-button:hover .rt-button-overlay,
.hk-cta .rt-button:focus-visible .rt-button-overlay {
  width: 110%;
}

.hk-cta .rt-button:hover .rt-button-text.rt-1,
.hk-cta .rt-button:focus-visible .rt-button-text.rt-1 {
  opacity: 0;
}

.hk-cta .rt-button:hover .rt-button-text.rt-2,
.hk-cta .rt-button:focus-visible .rt-button-text.rt-2 {
  opacity: 1;
}

/* Sisallon linkkivari ei saa vuotaa nappiin */
.hk-sisalto .hk-cta .rt-button,
.hk-sisalto .hk-cta .rt-button:hover {
  text-decoration: none;
}

/* ==========================================================================
   Navigaation Palvelut-alasvetovalikko

   Palvelut-linkki toimii edelleen linkkina palvelut-sivulle. Valikko
   avautuu hoverilla ja nappaimiston tarkennuksella (:focus-within).
   ========================================================================== */

.hk-nav-dropdown {
  position: relative;
  display: flex;
  align-items: center;
}

.hk-nav-dropdown-valikko {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 16rem;
  background: #ffffff;
  border: 1px solid var(--hk-viiva);
  box-shadow: 0 12px 28px rgba(0, 38, 72, .12);
  padding: .5rem 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 1000;
}

/* Nakymaton silta linkin ja valikon valiin, jottei hover katkea */
.hk-nav-dropdown-valikko::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
}

.hk-nav-dropdown:hover .hk-nav-dropdown-valikko,
.hk-nav-dropdown:focus-within .hk-nav-dropdown-valikko {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.hk-nav-dropdown-linkki {
  font-family: Montserrat, sans-serif;
  color: var(--hk-teksti);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .8rem 1.5rem;
  white-space: nowrap;
  transition: background-color .15s ease;
}

.hk-nav-dropdown-linkki:hover,
.hk-nav-dropdown-linkki:focus-visible {
  background: var(--hk-pohja-vaalea);
}

.hk-nav-dropdown-linkki.w--current {
  font-weight: 600;
}

/* ------ Mobiilivalikon avattava Palvelut-lohko ------
   Kosketuslaitteella hover ei toimi, joten mobiilissa kaytetaan natiivia
   details-elementtia: Palvelut-rivi avaa ja sulkee alalinkit. Listan
   ensimmainen kohta vie itse palvelut-sivulle. */

.hk-nav-mob {
  display: block;
  align-self: stretch;
  width: 100%;
}

/* Webflown .rt-nav-links-mob asettaa linkeille display:flex, joka ohittaa
   selaimen natiivin details-piilotuksen. Piilotetaan alalinkit itse. */
.hk-nav-mob:not([open]) > a {
  display: none !important;
}

.hk-nav-mob-otsikko {
  display: flex;
  align-items: center;
  gap: .6rem;
  cursor: pointer;
  list-style: none;
  /* summary ei peri linkkien varia, joten asetetaan se erikseen */
  color: var(--hk-teksti);
}

.hk-nav-mob[open] > .hk-nav-mob-otsikko,
.hk-nav-mob-otsikko:hover,
.hk-nav-mob-otsikko:focus-visible {
  color: var(--hk-teksti);
}

.hk-nav-mob-otsikko::-webkit-details-marker {
  display: none;
}

/* Kolmio kaantyy auki-tilassa */
.hk-nav-mob-otsikko::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 7px solid currentColor;
  transition: transform .2s ease;
}

.hk-nav-mob[open] .hk-nav-mob-otsikko::after {
  transform: rotate(180deg);
}

/* Alalinkit: selvasti Palvelut-otsikkoa pienempia ja vasempaan tasattuja */
.hk-nav-alalinkki {
  align-self: flex-start;
  justify-content: flex-start;
  text-align: left;
  font-size: 1.05rem !important;
  padding-top: .3rem;
  padding-bottom: .3rem;
  padding-left: 1.5rem;
  opacity: .85;
  position: relative;
}

.hk-nav-alalinkki::before {
  content: "";
  position: absolute;
  left: .4rem;
  top: .55em;
  bottom: .55em;
  width: 1px;
  background: currentColor;
  opacity: .4;
}

/* Alasvetovalikko vain tyopoydalla. Mobiilissa linkit ovat omina
   riveinaan mobiilivalikossa, jossa hover ei toimi. */
@media screen and (max-width: 991px) {
  .hk-nav-dropdown {
    display: none;
  }
}

@media screen and (min-width: 992px) {
  .hk-nav-mob {
    display: none;
  }
}

/* ==========================================================================
   Kuva-asettelut palvelusivuilla

   Kolme muotoa, joita vuorotellaan ettei sivu ole pelkkaa tekstipalstaa:
     .hk-kuvateksti          teksti ja kuva rinnakkain (kuva oikealla)
     .hk-kuvateksti--vasen   sama kaanteisena (kuva vasemmalla)
     .hk-kuvaruudukko        kaksi tai kolme tuotekuvaa rinnakkain
   ========================================================================== */

.hk-kuvateksti {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  column-gap: 4rem;
  margin: 3.5rem 0;
}

.hk-kuvateksti--vasen .hk-kuvateksti-media {
  order: -1;
}

/* Teksti taytta sarakkeen, joten leipatekstin 68ch-rajaa ei tarvita */
.hk-kuvateksti-teksti p,
.hk-kuvateksti-teksti ul,
.hk-kuvateksti-teksti .hk-lista {
  max-width: none;
}

.hk-kuvateksti-teksti h3:first-child {
  margin-top: 0;
}

.hk-kuvateksti-media {
  margin: 0;
}

.hk-kuvateksti-media img {
  display: block;
  width: 100%;
  height: auto;
  background: #ffffff;
  border: 1px solid var(--hk-viiva);
}

/* ------ Kuvaruudukko ------ */

.hk-kuvaruudukko {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin: 3rem 0;
}

/* Kahden kuvan rivi: kapeampi, jotta yksittainen tuotekuva ei kasva
   kohtuuttoman suureksi tayden levyisessa sarakkeessa. */
.hk-kuvaruudukko--kaksi {
  grid-template-columns: repeat(2, 1fr);
  max-width: 56rem;
}

.hk-kuvaruudukko figure {
  margin: 0;
}

.hk-kuvaruudukko img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: #ffffff;
  border: 1px solid var(--hk-viiva);
  padding: 1.5rem;
}

/* ------ Kuvatekstit ------ */

.hk-kuvateksti-media figcaption,
.hk-kuvaruudukko figcaption {
  font-family: Montserrat, sans-serif;
  color: var(--hk-teksti);
  text-align: left;
  font-size: .85rem;
  line-height: 150%;
  opacity: .75;
  margin-top: .75rem;
}

/* ==========================================================================
   Responsiivisuus: kuva-asettelut
   ========================================================================== */

@media (max-width: 991px) {
  .hk-kuvateksti {
    column-gap: 2.5rem;
  }
  .hk-kuvaruudukko {
    gap: 1.5rem;
  }
}

@media (max-width: 767px) {
  /* Yksi sarake: teksti ensin, kuva sen alle myos kaanteisessa muodossa */
  .hk-kuvateksti {
    grid-template-columns: 1fr;
    row-gap: 2rem;
    margin: 2.5rem 0;
  }
  .hk-kuvateksti--vasen .hk-kuvateksti-media {
    order: 0;
  }
  .hk-kuvaruudukko,
  .hk-kuvaruudukko--kaksi {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin: 2.5rem 0;
  }
}

@media (max-width: 479px) {
  .hk-kuvaruudukko,
  .hk-kuvaruudukko--kaksi {
    grid-template-columns: 1fr;
  }
}

/* Huoltopalvelun lisatiedot lomakkeen alla: selkea vali prosessiosioon */
.hk-huolto-lisatiedot {
  margin-top: 4.5rem;
}

@media (max-width: 767px) {
  .hk-huolto-lisatiedot {
    margin-top: 3rem;
  }
}

/* ==========================================================================
   Palvelusivujen artikkeliasettelu

   Ongelma jota tama ratkaisee: kun otsikot venyivat taydelle leveydelle ja
   leipateksti oli kapea, sivu nayti epasaannolliselta. Tassa kaikki osiot
   noudattavat samaa ruudukkoa: otsikko vasemmassa sarakkeessa, sisalto
   oikeassa. Vain kuvanostot ja CTA menevat taydelle leveydelle, ja ne
   rikkovat rytmin tarkoituksella.
   ========================================================================== */

.hk-artikkeli {
  --hk-sarake: 4rem;
}

/* ------ Johdanto ------ */

.hk-johdanto {
  max-width: 46rem;
  margin-bottom: 4rem;
}

.hk-artikkeli .hk-johdanto p {
  font-size: 1.15rem;
  line-height: 170%;
  max-width: none;
  margin-bottom: 1.25rem;
}

.hk-artikkeli .hk-johdanto p:last-child {
  margin-bottom: 0;
}

/* ------ Osio: otsikko vasemmalla, sisalto oikealla ------ */

.hk-osio {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 11fr);
  column-gap: var(--hk-sarake);
  align-items: start;
  padding: 3.5rem 0;
  border-top: 1px solid var(--hk-viiva);
}

.hk-osio:last-of-type {
  border-bottom: 1px solid var(--hk-viiva);
}

/* Otsikko pysyy paikallaan sarakkeensa ylalaidassa */
.hk-artikkeli .hk-osio-otsikko {
  margin: 0;
  font-family: Montserrat, sans-serif;
  color: var(--hk-teksti);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 140%;
  position: sticky;
  top: 7rem;
}

/* Sisaltosarakkeessa teksti saa tayttaa sarakkeen: leveys on jo rajattu */
.hk-artikkeli .hk-osio-sisalto > p,
.hk-artikkeli .hk-osio-sisalto > ul,
.hk-artikkeli .hk-osio-sisalto > .hk-lista {
  max-width: 60ch;
}

.hk-artikkeli .hk-osio-sisalto > :first-child {
  margin-top: 0;
}

.hk-artikkeli .hk-osio-sisalto > :last-child {
  margin-bottom: 0;
}

/* ------ Numeroidut vaiheet ------ */

.hk-vaiheet {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: hk-vaihe;
  max-width: none !important;
}

.hk-artikkeli .hk-vaiheet li {
  counter-increment: hk-vaihe;
  position: relative;
  padding: 0 0 0 3rem;
  margin: 0;
  font-size: 1rem;
  line-height: 170%;
}

.hk-artikkeli .hk-vaiheet li::before {
  content: counter(hk-vaihe);
  position: absolute;
  left: 0;
  top: .1em;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hk-teksti);
  border-radius: 50%;
  font-size: .85rem;
  font-weight: 600;
  background: none;
}

/* ------ Taysleveat kuvanostot osioiden valissa ------ */

/* Kuvanosto: kuva ja sen selite rinnakkain samassa ruudukossa kuin osiot.
   Nain kuvan ympari ei jaa isoa tyhjaa aluetta taydella leveydella. */
.hk-nosto {
  display: grid;
  grid-template-columns: minmax(0, 9fr) minmax(0, 7fr);
  column-gap: var(--hk-sarake);
  align-items: center;
  margin: 0;
  padding: 3.5rem 0;
  border-top: 1px solid var(--hk-viiva);
}

.hk-nosto-kuva {
  display: block;
  width: 100%;
  height: auto;
  max-height: 24rem;
  object-fit: contain;
  background: #ffffff;
  border: 1px solid var(--hk-viiva);
  padding: 2rem;
}

.hk-artikkeli .hk-nosto figcaption {
  font-family: Montserrat, sans-serif;
  color: var(--hk-teksti);
  text-align: left;
  font-size: 1rem;
  line-height: 170%;
  opacity: 1;
  margin-top: 0;
  max-width: 34ch;
  padding-left: 1.5rem;
  border-left: 2px solid var(--hk-teksti);
}

/* ------ Kuvat osion sisaltosarakkeessa ------ */

.hk-osio-sisalto .hk-kuvaruudukko {
  margin: 2.5rem 0 0;
  max-width: none;
}

.hk-osio-sisalto .hk-faktalaatikko {
  max-width: 60ch;
}

/* CTA erottuu artikkelin lopusta */
.hk-artikkeli .hk-cta {
  margin-top: 4rem;
}

/* ==========================================================================
   Responsiivisuus: artikkeliasettelu
   ========================================================================== */

@media (max-width: 991px) {
  .hk-artikkeli {
    --hk-sarake: 2.5rem;
  }
  .hk-osio {
    grid-template-columns: minmax(0, 6fr) minmax(0, 10fr);
    padding: 3rem 0;
  }
}

@media (max-width: 767px) {
  /* Yksi palsta: otsikko sisallon paalle, ei sticky-kiinnitysta */
  .hk-osio {
    grid-template-columns: 1fr;
    row-gap: 1.25rem;
    padding: 2.5rem 0;
  }
  .hk-artikkeli .hk-osio-otsikko {
    position: static;
    font-size: 1.2rem;
  }
  .hk-vaiheet {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .hk-johdanto {
    margin-bottom: 2.5rem;
  }
  .hk-artikkeli .hk-johdanto p {
    font-size: 1.05rem;
  }
  .hk-nosto {
    grid-template-columns: 1fr;
    row-gap: 1.5rem;
    padding: 2.5rem 0;
  }
  .hk-nosto-kuva {
    padding: 1.5rem;
    max-height: 16rem;
  }
  .hk-artikkeli .hk-nosto figcaption {
    font-size: .95rem;
    max-width: none;
  }
}

/* ==========================================================================
   Yritys-sivu: kuvapaikka henkilolle jolta kuva viela puuttuu
   ========================================================================== */

/* Sama paikka ruudukossa ja sama 4:5-kuvasuhde kuin henkilokuvilla, jotta
   asettelu pysyy samana kun oikea kuva myohemmin vaihdetaan tilalle. */
.hk-kuva-paikka {
  width: 100%;
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #eceef0;
  border: 1px solid #dcdfe3;
  color: #cbd0d5;
}

.hk-kuva-paikka-ikoni {
  width: 7rem;
  height: 7rem;
}

/* Kuvien leveydet kapenevat naissa taitteissa, kuvapaikka seuraa perassa */
@media (max-width: 767px) {
  .hk-kuva-paikka {
    width: 60%;
  }
}

@media (max-width: 479px) {
  .hk-kuva-paikka {
    width: 100%;
  }
}