#intro{
    color: var(--text-color);
    display: grid;
   margin-top: 5em;
   margin-bottom: 10em;
    
    grid-template:
    ".  text . image   image" 30vh
    ".  text    . image   image" 30vh
    ".  about-small    . image   image" 30vh
    /4vw 30vw 10vw 45vw 4vw
    ;
}


#about-small{
    grid-area: about-small;
    width: fit-content;
    height: fit-content; 
    border-radius: 0.5em;
    padding: 0.25em 0.5em; 
    box-sizing: border-box; 
    color: var(--text-color);
    background-color: hsla(0, 0%,0%, 0.5);
    font-family: var(--dog-font);
    text-decoration: none;
    font-size: 1.5em;
    
}
a:hover{
    color: var(--hover-color);
    transform: scale(1.04);
  }
.text-block{
       grid-area: text;
       h3{
        margin:0;
       }
       h1{
        width: fit-content;
        background-color: var(--header-color);
        font-size: 5em;
        margin: 0;
       }
       
       /* border: 1px solid red; */
}
.hero{
    
    grid-area: image;
    
    
    
    img{
        position: relative;
        
        width: 50em;
        max-width: none;
        height: auto;
        object-fit: cover;
        /* border-radius: 3em;
        corner-shape: bevel ; */
        object-position: 80% 80%;
        filter: saturate(85%);
    }
}   

#mission{
    margin-top: 12em;
    margin-bottom: 4em;
    display:grid;
    grid-template:

    ".  image . text   ." 30vh
    /4vw 40vw 4vw 45vw 8vw;
    
}

#current{
    
    font-size:1.5em;
    padding: 2vw;
}