* { box-sizing: border-box; margin: 0; padding: 0; }
    html, body { height: 100%; }
    body { height: 100vh; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; }

    .split {
      height: 100vh;
      width: 100%;
      display: flex;
      flex-direction: column;
    }

    .panel {
      width:50%;
      display: flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      color: #fff;
      font-weight: 700;
      font-size: clamp(1.25rem, 4vw, 2.25rem);
      text-align: center;
    }

    .overlay { 
        position: absolute;
        top: 0px;
        height: 100%;
        width: 100%;
        opacity: 0.3;
        z-index: 1;
        background: linear-gradient(135deg, #2563eb 0%, #06b6d4 100%); }
    .overlay2 { background: linear-gradient(135deg, #f97316 0%, #ef4444 100%) !important; }

    

    .panel .wrap { max-width: 900px; position:relative;}
    .panel .img{
        top: 0px;
        position: absolute;
        height:100%;
        width:100%;
        object-fit:cover;
    }
    .title { display: block; font-size: 2rem; letter-spacing: -0.02em; font-weight: bold;}
    .subtitle { display: block; margin-top: 0.5rem; font-size: 1.2rem; font-weight: 500; opacity: .9; }




.s{
    overflow: hidden;
    width: 100%;
    height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    
}
.s .p{
    position: relative;
    text-decoration: none;
    color:#fff;
}
.p .wrapper{
    text-align: center;
    top: 0px;
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.s .p .img{
    height: 100%;
    object-fit: cover;
    width: 100%;
    position: absolute;
    top: 0px;
    z-index: -1;
}

    @media (min-width: 768px) {
      .split { flex-direction: row; } 
    }