/* Container for the whole form + results (stacked vertically) */
.postal-code-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Images in the results */
#postal-code-result img {
    max-height: 222px;
    width: auto;
}

.contact img {
    max-width: 100%;
    height: auto;
}

/* Layout for the contact cards inside the results */
#postal-code-result {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 equal columns on desktop */
    gap: 20px;
}

/* Force the 3rd card below the 1st if you want that */
/* Remove this if you want all cards in one row */
#postal-code-result .contact-card:nth-child(3) {
    /* Uncomment below if you want this behavior */
    /* grid-column: 1 / 2; */
}

/* Each contact card styling */
.contact-card {
    width: 100%; /* full width of grid cell */
    box-sizing: border-box;
    /*border: 1px solid #ddd;*/
    padding: 15px;
    /*background-color: #fff;*/
    border-radius: 4px;
}

/* Images inside contact cards */
.contact-card img {
    max-width: 100%;
    height: auto;
    margin-bottom: 10px;
}

/* Responsive adjustments */

/* Tablets: 2 columns */
@media (max-width: 1024px) {
    #postal-code-result {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile: 1 column */
@media (max-width: 768px) {
    #postal-code-result {
        grid-template-columns: 1fr;
    }

    /* Optional: stack form and result nicely */
    .postal-code-container {
        gap: 10px;
    }
}

#postal-code-result > h3 {
    grid-column: 1 / -1; /* span all columns */
}

#postal-code-result > br {
    display: none; /* or remove it */
}