.helen-map {
position: relative;
inline-size: 100%;
aspect-ratio: 16 / 9;
margin-block-start: var(--space-2xl);
overflow: hidden;
border-radius: var(--radius-container);
background-color: var(--color-surface-service);
box-shadow: 14px 12px 40px rgba(0, 0, 0, 0.22);
} .helen-map__gate[hidden] {
display: none;
}
.helen-map__gate {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-s);
padding: var(--space-m);
text-align: center;
}
.helen-map__address {
margin: 0;
font-family: var(--font-serif);
font-size: var(--font-size-h2);
line-height: var(--line-height-h2);
color: var(--color-text-on-light);
}
.helen-map__note {
max-inline-size: var(--column-narrow-width);
margin: 0;
padding: var(--space-xs) var(--space-s);
border-radius: var(--radius-container);
background-color: var(--color-surface-base);
color: var(--color-text-on-light);
}
.helen-map__note a {
color: inherit;
text-decoration: underline;
} .helen-map .helen-map__load {
border: 0;
white-space: nowrap;
}
.helen-map .helen-map__load:is(:hover, :focus) {
background-color: var(--color-button-fill);
color: var(--color-text-on-dark);
}
.helen-map iframe {
position: absolute;
inset: 0;
inline-size: 100%;
block-size: 100%;
border: 0;
}
@media (max-width: 767px) {
.helen-map {
aspect-ratio: auto;
min-block-size: 320px;
margin-block-start: var(--space-xl);
}
.helen-map__gate {
position: static;
}
.helen-map:has(iframe) {
aspect-ratio: 16 / 9;
}
}