.maps { border: 1px solid transparent; margin: auto; padding: calc(var(--mp) * 2); margin-bottom: calc(var(--mp) * 2); background-color: var(--bg-dependent-bg-color-trans); color: var(--bg-dependent-fg-color); backdrop-filter: var(--backdrop-filter); margin-bottom: calc(var(--mp) * 4); border-radius: calc(var(--mp) * 2); } .maps iframe { width: 100% !important; border: 0px solid transparent; border-radius: calc(var(--mp) * 1); border: 1pt solid var(--bg-dependent-fg-color); min-height: 12rem; } .maps .google_places_id { display: none; } iframe { filter: hue-rotate(0deg) grayscale(0%) invert(0%); margin-top: calc(var(--mp) * 2); } .maps_dark_mode iframe { filter: hue-rotate(180deg) grayscale(100%) invert(100%); } .address_label_id { display: block; margin-bottom: calc(var(--mp) * 2); padding-bottom: calc(var(--mp) * 2); border-bottom: 1px dashed var(--bg-dependent-fg-color); font-size: 1.25rem; padding: var(--mp); } .address { font-size: .85rem; white-space: pre-line; } .financial_table, .working_hours_table, .contacts_table { display: grid; gap: var(--mp); width: inherit; margin: auto; width: 100%; margin-bottom: calc(var(--mp) * 1); } .working_hours_table { grid-template-columns: 40% auto auto; } .contacts_table .contacts_header, .working_hours_table .working_hours_header { font-weight: 600; border-bottom: 1px dashed var(--bg-dependent-fg-color); } .working_hours_table .working_hours_header { grid-column: 1 / 4; } .working_hours_table .working_hours_label, .contacts_table .contacts_label { display: flex; align-items: center; align-content: center; justify-items: center; justify-content: flex-end; font-weight: 600; } .working_hours_table .working_hours_value, .contacts_table .contacts_value { display: flex; align-items: center; align-content: center; justify-items: center; justify-content: space-between; font-size: .85rem; white-space: nowrap; } .working_hours_table .working_hours_value { justify-content: center; } .contacts_table .icon_button_bn *, .contacts_table .icon_button_bn { color: inherit !important; } .contacts_table .contacts_header, .contacts_table .contacts_we_answer { grid-column: 1 / 7; } .maps a { color: inherit !important; } .contacts_block { padding-bottom: calc(var(--mp) * 2); border-bottom: 1px dashed var(--bg-dependent-fg-color); } .contacts_we_answer { width: 100%; margin: auto; padding-bottom: calc(var(--mp) * 1); font-size: 1rem; color: var(--bg-dependent-fg-color) !important; fill: var(--bg-dependent-fg-color) !important; stroke: var(--bg-dependent-fg-color) !important; } .contacts_we_answer .icon i { background-color: var(--bg-dependent-fg-color) !important; } .contacts_we_answer .title_label { font-weight: 600; border-bottom: 1px solid var(--bg-dependent-fg-color-trans) !important; padding: calc(var(--mp) * .5); text-transform: uppercase; font-size: 80%; text-align: right; margin-bottom: calc(var(--mp) * 1); } .contacts_we_answer i { background-color: var(--bg-dependent-fg-color) !important; } .contacts_we_answer div.icons, .contacts_we_answer div.labels { display: flex; align-items: center !important; align-content: center !important; justify-items: center !important; margin: auto; } .contacts_we_answer div.icons { justify-content: center; } .contacts_we_answer div.labels { justify-content: space-between; width: 65%; } @media screen and (min-width:721px) { .maps { width: var(--contents-width); display: grid; grid-template-columns: 33% auto; } .maps iframe { aspect-ratio: 21 / 9; } .contacts_table { grid-template-columns: 2rem auto 2rem 2rem auto 2rem; } .financial_table { grid-template-columns: 33% auto; } .contacts_we_answer { max-width: calc(var(--contents-width) * .5); } } @media screen and (max-width:720px) { .maps { margin: calc(var(--mp) * 1); max-width: var(--contents-width); max-width: 96%; } .maps iframe { margin: auto; margin-top: calc(var(--mp) * 2); aspect-ratio: 1 / 1; } .contacts_table *, .contacts_table { font-size: 1rem !important; } .contacts_table { grid-template-columns: 2rem auto 2rem; } .contacts_table .contacts_header, .contacts_table .contacts_we_answer { grid-column: 1 / 4; } .financial_table { grid-column: 1 / 3; } }