.henkiloc-ta { position: relative; 
background-color:#fff;
background-image:url(../img/suhru.jpg);
background-repeat:no-repeat;
background-size:100% auto;
background-position:top center;
}

.henkiloc-ta__title {
  line-height: 0.9;
  letter-spacing: .02em;
  font-weight: 100;
  font-size:140px;
  text-transform:uppercase;
  margin-bottom:-50px;
	max-width:850px;
}

/* Grid – 2 korttia rinnakkain, pinoutuu mobiilissa */
.henkiloc-ta__grid {
  display: flex;
  flex: 0 0 100%;
  justify-content: space-around;
  position:relative;
  z-index:1;
}

.henkiloc-ta header {flex: 0 0 100%;}

.person { max-width:400px;}
.person:nth-child(2) {margin-top:80pX;}


.person__media { margin: 0; }

.person__name { margin: .25rem 0 0.5rem; font-size: clamp(1.5rem, 3vw, 2.25rem); letter-spacing: .02em; text-transform:uppercase;}
.person__name--first { font-weight: 500; }
.person__name--last  { font-weight: 300; }

.person__bio { color: #333; font-size: 1rem; line-height: 1.6; max-width: 38ch; }
.person__bio p:nth-child(1) {text-indent:40px;}
.person__contacts, .person__links { list-style: none; margin: 1rem 0 0; padding: 0; }
.person__contacts li { display: flex; align-items: center; gap: .5rem; margin: .35rem 0; }
.person__contacts a { text-decoration: none; color: inherit; font-weight:300;}
.person__contacts .icon { display: inline-flex; color: #22a152; }

.person__links { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; opacity: .9; }
.person__links a { text-underline-offset: 2px; }

/* Hover-overlay (valinnainen “vihreä laatikko” efekti myös kuvan päälle) */
.person__media { position: relative; }
.person__media {
  position: relative;
  display: inline-block;
}

.person__img {
  display: block;
  width: 100%;
  height: auto;
}

/* Hover kuva päällekkäin */
.person__img--hover {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity .4s ease;
}

/* Fademainen hover */
.person__media:hover .person__img--hover {
  opacity: 1;
}

/* Samalla default kuva voi himmetä hieman */
.person__media:hover .person__img--default {
  opacity: 0;
  transition: opacity .4s ease;
}


@media (max-width:840px) {
  .henkiloc-ta__grid {gap:50px;hyphens: auto;word-break: break-word;}
  html {font-size:14px;lang: fi;}
  .sct-content {font-size:1rem; }
}

@media (max-width:480px) {
    html {font-size:12px;}
    .custom-slider-block {padding-bottom:50px;}
        .henkiloc-ta__grid {
        gap: 30px;
    }
}
@media (max-width:400px) {
    html {font-size:11px;}
        .henkiloc-ta__grid {
        gap: 15px;
    }
}