body{
    margin: 0; 
    background-color: #fff;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: #444; 
}
img{
    max-width: 100%; 
    border: 0; 
}
.container{
    max-width: 1400px;
    margin: auto; 
    background-color: #fff;
}
header {
    height: 300px;
}
header img{
    height: 100%;
    width: 100%; 
    object-fit: cover;
}
main div, 
footer > div{
    max-width: 800px;
    margin: auto;
    padding: 2rem;
    line-height: 1.7;
}
main a{
  text-decoration: none;
  color: rgb(46, 100, 145);
}
::marker{
  color: rgb(46, 100, 145);
}
.tel{
    background-color: rgb(46, 100, 145);
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.tel a{
    display: grid;
    color: white; 
    text-align: center;
    transition: background-color 0.4s;
    text-decoration: none;
    font-size: 1.1rem;
    padding: 1rem 
}
.tel a:hover{
    background-color:#183c52;  
}
.tel img{
    height: 40px; 
    display: block;
    margin: auto;
}
.picturegrid{
    display: grid;
    gap: 0.5rem;
}
footer{
    background-color: rgb(46, 100, 145);
    color: #fff; 
    background-image: url('/images/squirrel-white.png');
    background-position: right bottom;
    background-repeat: no-repeat;
}
footer a{
    color: #fff; 
    text-decoration: none;
}
footer > div{
    display: grid;
    gap: 1rem; 
} 
#map{
    height: 400px; 
    margin-block: 0.5rem;
}


@media only screen and ( min-width: 640px ) {
    body{
        margin: 2rem; 
        background-color: #534c4c;
    }
    .picturegrid{
        grid-template-columns: 1fr 1fr 1fr;
    }
    .picturegrid img, 
    .grid#pictures img{
        display: block;
    }
    footer{
        border-radius: 0 0 1rem 1rem;
    }
    footer > div{
        grid-template-columns: 1fr 1fr 1fr;
    }



    /* kevin powell grid centering */
    .container{
        container-type: inline-size;
        border-radius: 1.1rem;
        box-shadow: 3px 3px 15px rgba(0,0,0,20%);
    }
    header, 
    header img{
        border-radius: 1rem 1rem 0 0 ;
    }
  .grid#pictures {
    display: grid;
    gap: 0.5rem;
    /*   grid-template-columns: repeat(calc(var(--column-count, 3) * 2), 1fr); */
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  
    @container (width >= calc(130px * 2 + 0.5rem)) {
      div {
        grid-column: span 2;
      }
    }
  
    @container (calc(130px * 4 + 1.5rem) < width < calc(130px * 6 + 2.5rem) ) {
      div:last-child:nth-child(odd) {
        grid-column: 2 / span 2;
      }
    }
  
    @container (calc(130px * 6 + 2.5rem) < width < calc(130px * 8 + 3.5rem)) {
      div:nth-child(3n + 4):last-child {
        grid-column: 3 / 5;
      }
  
      &:has(:nth-child(3n + 5):last-child) > :nth-last-child(2) {
        grid-column: 2 / 4;
      }
    }
  
    @container (calc(130px * 8 + 3.5rem) < width < calc(130px * 10 + 4.5rem)) {
      div:nth-child(4n + 5):last-child {
        grid-column: 4 / 6;
      }
  
      &:has(:nth-child(4n + 6):last-child) > :nth-last-child(2) {
        grid-column: 3 / 5;
      }
  
      &:has(:nth-child(4n + 7):last-child) > :nth-last-child(3) {
        grid-column: 2 / 4;
      }
    }
  
  
  @container (calc(130px * 10 + 4.5rem) < width < calc(130px * 12 + 5.5rem)) {
    div:nth-child(5n + 6):last-child {
      grid-column: 5 / 7;
    }
  
    &:has(:nth-child(5n + 7):last-child) > :nth-last-child(2) {
      grid-column: 4 / 6;
    }
  
    &:has(:nth-child(5n + 8):last-child) > :nth-last-child(3) {
      grid-column: 3 / 5;
    }
  
    &:has(:nth-child(5n + 9):last-child) > :nth-last-child(4) {
      grid-column: 2 / 4;
    }
  
  }
  }
}