#biografia,
#biografia *{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

#biografia{
  position:relative;
  width:100vw;
  height:100vh;
  overflow:hidden;
}

.bio-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.bio-text,
.bio-text *{
  font-family:'Caviar2',sans-serif;
}

.bio-text{
  position:absolute;
  top:50%;
  left:10%;
  width:35%;
  transform:translateY(-50%);
  text-align:center;
  line-height:1.4;
  font-size:clamp(14px,1.3vw,18px);
}

.bio-text h2{
  font-size:clamp(32px,3vw,64px);
  color:#00FF22;
  margin-bottom:1.2rem;
  font-weight:700;
}

@media(max-width:1024px){
  .bio-text{
    left:8%;
    width:40%;
  }
}

@media(max-width:768px){
  #biografia{height:auto;}
  .bio-img{
    position:relative;
    height:60vh;
  }
  .bio-text{
    position:static;
    width:100%;
    transform:none;
    padding:8vw 6vw;
    text-align:center;
    background:#fff;
  }
}

@media(max-width:600px){
  #biografia{height:100vh;}
  .bio-img{
    position:absolute;
    height:100%;
    object-position:60% 50%;
  }
  .bio-text{
    position:absolute;
    top:17%;
    left:42%;
    transform:translateX(-50%);
    width:65%;
    background:rgba(255,255,255,.85);
    padding:3vw;
    border-radius:8px;
    backdrop-filter:blur(4px);
    text-align:left;
    font-size:2.6vw;
    line-height:1.3;
  }
  .bio-text h2{
    margin-bottom:2.5vw;
    font-size:6vw;
  }
}

@media(max-width:400px){
  .bio-text{
    text-align:left;
    left:42%;
    width:60%;
    font-size:3vw;
    padding:3.5vw;
  }
  .bio-text h2{font-size:7.5vw;}
}