.hero{
    position:relative;
    background:url('../img/grid-paper.png') no-repeat, var(--color-rain) ;
    background-size: contain;
    background-position: center center;
    min-height:700px;
    border-radius: 2rem 2rem 0 0;
    margin-top:80px;
    padding: 0 0 4rem 0;
}
.hero-content{
    display: grid;
    grid-template-columns: 50% 50%;
    grid-column-gap: 10px;
    align-items: center;
    width: clamp(8rem, 90vw, 100rem);
    margin-left: auto;
    margin-right: auto;
    grid-template-areas: "a a"
                         "b c ";  
}
.hero-a { 
    grid-area: a; 
    position: absolute;
    min-height: 700px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; }
.hero-a svg {
  width: 100%;
  height: auto; /* Ensures the height adjusts with the width to preserve aspect ratio */
  display: block; /* Helps with alignment issues */
}
.hero-b { 
    grid-area: b;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 700px;
    justify-content: flex-end; }
.hero-c { 
    grid-area: c; 
    aspect-ratio:1.0;
    height: 100%;
    min-height: 700px;}

.hero-content > div{
    padding-top:64px;
}
h1#heroSplit2:first-letter {
    margin-left: -.175rem;
}
#heroSplit2{
    text-wrap: balance;
}
@media (max-width: 600px) {
    .hero-a { position: relative; }
    .hero-content {
        grid-template-areas: "a" "c" "b";
        grid-template-columns: 1fr;
        grid-template-rows: 1;
    }
    .hero-content > div{
    padding-top:24px;
    }
}