#contact-form {
    width: 100%;
}
#contact-form input[type=email] {
    width: 45%;
}
#contact-form textarea {
    width: 100%;
    height: 150px;
    padding-top: 2%;
}
#contact-table {
    line-height: 1.5rem;
    width: 300px;
}
.contact-details svg {
    color: var(--light-blue);
    height: auto;
}
#google-maps {
    width: 100%;
}
@media only screen and (max-width: 550px) {
    .outer-container:has(#contact-form) {
        flex-direction: column-reverse;
        gap: 25px;
    }
    .container:has(.opening-hours){
        row-gap: 25px;
    }
    .opening-hours h2 {
        margin-bottom: 10px;
    }
    :is(.contact-details) :is(.p-head) {
        &:not(:last-child) {
            margin-bottom: 0.6rem;
        } 
    }
    .contact-details svg {
        width: 16px;
    }
    #google-maps {
        height: 300px;
    }
}
@media only screen and (min-width: 551px) and (max-width: 1058px) {
    .container:has(.opening-hours){
        row-gap: 25px;
    }
    .opening-hours h2 {
        margin-bottom: 10px;
    }
    :is(.contact-details) :is(.p-head) {
        &:not(:last-child) {
            margin-bottom: 0.8rem;
        } 
    }
    .contact-details svg {
        width: 20px;
    }
    #google-maps {
        height: 350px;
    }
}
@media only screen and (min-width: 1059px) {
    .container:has(.opening-hours){
        row-gap: 30px;
    }
    .opening-hours h2 {
        margin-bottom: 15px;
    }
    :is(.contact-details) :is(.p-head) {
        &:not(:last-child) {
            margin-bottom: 0.8rem;
        } 
    }
    .contact-details svg {
        width: 22px;
    }
    #google-maps {
        height: 400px;
    }
}