@media (min-width: 1040px) {
    #service-area {

        margin-top: 5%;
        display: grid; 
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 15% 40% 40%;

        row-gap: 10px;

        height: 600px;
    }

    #service-area h2 {
        grid-row-start: 1;
        grid-column-start: span 2;

        justify-self: center;

        font-size: calc(2.5rem + .8vw);
    }

    .service-area-locations {
        grid-row-start: 2;

        padding: 20px;

        align-content: center;

        ul {
            display: flex;
            flex-wrap: wrap;
            text-wrap: balance;

            li {
                list-style-type: disc;
                margin: 0 20px;

                font-size: 1.7rem;

            }
        }
    }

    .service-area-alternate {
        grid-row-start: 3;

        align-content: end;
        h3 {
            text-align: center;
            font-size: 1.5rem;
            font-weight: 700;
        }
        a {
            display: block;
            width: fit-content;
            margin: 0 auto;
    
            button {
                padding: 15px 25px;
                margin-top: 10px;

                font-size: 1.2rem;
                font-weight: bolder;
    
                background: rgb(0,127,255);
                background: linear-gradient(159deg, rgba(0,127,255,1) 0%, rgb(77, 106, 183) 100%);
                color: white;
                border-radius: 5px;
                border: 0;
            }
        }

        
    }

    gmp-map {
        height: 100%;
        width: 90%;
        
        grid-row-start: span 2;
        grid-column-start:  2;

    }
}

@media (min-width: 490px) and (max-width: 1040px){
    #service-area {
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 7% 15% 50% 5%;
    
        row-gap: 20px;
    
        height: 700px;
    
      }
      #service-area h2 {
        text-align: center;
        font-weight: 800;
        font-size: calc(1.7rem + .8vw);
        text-wrap: pretty;
      }
    
      .service-area-locations {
        grid-row-start: 2;    
    
        ul {
            display: flex;
            
            width: 100%;
    
            flex-wrap: wrap;
            text-wrap: balance;
            list-style-type: disc;
    
            li {
                margin: 0px 12px ;
                font-size: 1.2rem;
            }
    
        }
      }
    
      .service-area-alternate {
        grid-row-start: 4;
        width: 100%;
    
    
        h3 {
            text-align: center;
            font-size: 1.5rem;
            font-weight: 700;
        }
        a {
            display: block;
            width: fit-content;
            margin: 0 auto;
    
            button {
                padding: 15px 25px;
                margin-top: 10px;

                font-size: 1.2rem;
                font-weight: bolder;
    
                background: rgb(0,127,255);
                background: linear-gradient(159deg, rgba(0,127,255,1) 0%, rgb(77, 106, 183) 100%);
                color: white;
                border-radius: 5px;
                border: 0;
            }
        }
    
      }
    
      gmp-map {
        height: 100%;
        width: 100%;
    
        grid-row-start: 3;
      }
}

@media (max-width: 490px) {
      
  #service-area {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 8% 22% 50% 5%;

    row-gap: 20px;

    height: 700px;

  }
  #service-area h2 {
    text-align: center;
    font-weight: 800;
    font-size: calc(1.3rem + .8vw);
  }

  .service-area-locations {
    grid-row-start: 2;    

    ul {
        display: flex;
        
        width: 100%;

        flex-wrap: wrap;
        list-style-type: disc;

        li {
            margin: 0px 10px ;
            text-wrap: pretty;

        }

    }
  }

  .service-area-alternate {
    grid-row-start: 4;
    width: 100%;


    h3 {
        text-align: center;
        font-size: 1.1rem;
        font-weight: 700;
    }
    a {
        display: block;
        width: fit-content;
        margin: 0 auto;

        button {
            padding: 10px 20px;
            margin-top: 10px;

            background: rgb(0,127,255);
            background: linear-gradient(159deg, rgba(0,127,255,1) 0%, rgb(77, 106, 183) 100%);
            color: white;
            border-radius: 5px;
            border: 0;
        }
    }

  }

  gmp-map {
    height: 100%;
    width: 100%;

    grid-row-start: 3;
  }
    
}