/* --------------- Contact --------------- */

.contact{
    grid-column: col-start / span 12;
    grid-row-start: 2;
    grid-row-end: 3;
    padding-top: 60px;
    padding-bottom: 60px;
    align-self: center;
    z-index: 2; 
  }
  
.contact-content{
    display: grid;
    grid-row-gap: 30px;
    grid-column-gap: 30px;
    height: 100%;
}

.contact-content img{
    width: 100%;
}

.iframetest{
    height: 100%;
}

.hero-image{
    grid-column: col-start / span 12;
    z-index: 1; 
    grid-row-start: 2;
    grid-row-end: 3;
}


/* --------------- MEDIA QUERIES --------------- */

@media (min-width: 300px) {
  
    .wrapper{
      grid-template-rows: 60px auto auto;
      grid-template-columns: 1fr;    
    }
    .contact-content{
        grid-template-columns: 1fr; 
    }

    .contact-a{
        text-align: center;
    }
    
    .contact-b{
        justify-self: center;
        text-align: center;
        line-height: 2rem;
    }

    .map{
        display: none;
    }
    
    .map-mobile{
        display: block;
    }
}
  
@media (min-width: 768px) {

    .map{
        display: block;    
    }
    
    .map-mobile{
        display: none;
    }
}

@media (min-width: 768px) {
    .wrapper{
      grid-template-rows: 60px auto 240px;
    }
  }

  @media (min-width: 1024px) {
    .wrapper{
      grid-template-columns: repeat(12, [col-start] 1fr);
      grid-template-rows: 60px auto 220px;
    }
  }

@media (min-width: 1024px) {

    .contact-content{
        grid-template-columns: repeat(3, [col-start] 1fr);
      }

      .contact-a{
        grid-column: col-start / span 3;
      }
    
      .contact-b{
        grid-column: col-start / span 3;
        justify-self: center;
    
      }
    
      .contact-c{
        grid-column: col-start / span 1;
        align-self: stretch;
      }
    
      .contact-d{
        grid-column: 2 / span 1;
      }
     
      .contact-e{
        grid-column: 3 / span 1;
      }     
}