.contact-grid {
    display: block;
    margin-bottom: var(--spacing-3xl);
}

.contact-info {
    min-width: 0;
}

.contact-methods {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(300px, 1.25fr);
    grid-template-areas:
        "booking address map"
        "phone email map"
        "transit transit bank";
    gap: var(--spacing-lg);
    align-items: stretch;
}

.contact-methods > .contact-method:nth-child(1) { grid-area: booking; }
.contact-methods > .contact-method:nth-child(2) { grid-area: address; }
.contact-methods > .contact-method:nth-child(3) { grid-area: phone; }
.contact-methods > .contact-method:nth-child(4) { grid-area: email; }
.contact-methods > .contact-method:nth-child(5) { grid-area: transit; }
.contact-methods > .contact-method:nth-child(6) { grid-area: bank; }

.contact-method {
    height: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: var(--spacing-lg);
}

.contact-methods > .contact-method:nth-child(3),
.contact-methods > .contact-method:nth-child(4),
.contact-methods > .contact-method:nth-child(6) {
    padding: var(--spacing-md) var(--spacing-lg);
}

.contact-methods > .map-section {
    grid-area: map;
    min-width: 0;
    margin: 0;
    height: 100%;
    align-self: stretch;
}

.contact-methods > .map-section .map-illustration {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
}

.contact-methods > .map-section .map-illustration img {
    position: absolute;
    top: 50%;
    width: 100%;
    left: 0;
    max-width: none;
    max-height: none;
    height: auto;
    display: block;
    transform: translateY(-50%);
}

@media (max-width: 1100px) {
    .contact-methods {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            "booking address"
            "phone email"
            "map map"
            "transit bank";
    }

    .contact-methods > .map-section {
        height: auto;
    }

    .contact-methods > .map-section .map-illustration {
        height: clamp(300px, 52vw, 470px);
    }

    .contact-methods > .map-section .map-illustration img {
        width: 100%;
        left: 0;
    }
}

@media (max-width: 680px) {
    .contact-methods {
        grid-template-columns: 1fr;
        grid-template-areas:
            "booking"
            "address"
            "phone"
            "email"
            "map"
            "transit"
            "bank";
    }

    .contact-methods > .map-section .map-illustration {
        height: clamp(260px, 92vw, 430px);
    }

    .contact-methods > .map-section .map-illustration img {
        width: 100%;
        left: 0;
    }

    .contact-methods > .contact-method:nth-child(3),
    .contact-methods > .contact-method:nth-child(4),
    .contact-methods > .contact-method:nth-child(6) {
        padding: var(--spacing-lg);
    }
}