#singular-main {
    grid-template-areas:
    'a a b'
    'a a b'
    'c d e';
    row-gap: var(--gutter);
}





.contact__icon {
    height: 4.8rem;
    margin-bottom: 3.6rem;
}
.contact h2 {
    font-size: 3rem;
}
.contact p {
    font-size: 1.6rem;
    margin-bottom: 2.4rem;
}
.contact span {
    display: block;
    font-size: 2.4rem;
}





#map {
    grid-area: a;
    position: relative;
    overflow: hidden;
}
#map img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-position: center;
}

#phone {
    grid-area: d;
}

#email {
    grid-area: e;
}

#image {
    grid-area: c;
    position: relative;
    overflow: hidden;
}
#image img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-position: top center;
}

#address {
    grid-area: b;
}
#address strong {
    color: var(--black);
}
#address ul li {
    padding: 1.2rem 0;
    border-bottom: solid 0.1rem var(--gray80);
}
#address ul li:first-child {
    padding-top: 0;
}
#address ul li:last-child {
    padding-bottom: 0;
    border-bottom: none;
}





@media only screen and (max-width: 1024px) and (orientation: portrait) {
    #singular-main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    #singular-main {
        grid-template-areas:
        'a a'
        'a a'
        'b c'
        'd e'
    }
    #map {
        height: 0;
        padding-top: 50%;
    }
}
@media only screen and (max-width: 640px) and (orientation: portrait) {
    #singular-main {
        grid-template-columns: 1fr;
    }
    #singular-main {
        grid-template-areas:
        'a'
        'b'
        'c'
        'd'
        'e'
    }
    #map {
        padding-top: 75%;
    }
    #map img {
        transform: scale(1.75);
    }
    #image {
        height: 0;
        padding-top: 75%;
    }
}