.eg-hero__grid {
gap: var(--space-8);
align-items: center;
}
@media (min-width: 1024px) {
.eg-hero__grid {
grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
gap: var(--space-8);
}
}
.eg-hero__map {
min-width: 0;
}
.eg-map-svg {
display: block;
width: 100%;
height: auto;
}
.eg-map-svg__region {
fill: none;
stroke: var(--color-blue-light);
stroke-opacity: 0.7;
stroke-width: 1.6;
stroke-linejoin: round;
stroke-linecap: round;
}
.eg-map-svg__shape {
fill: var(--color-blue-light);
fill-opacity: 0.55;
stroke: var(--color-blue-light);
stroke-width: 2;
stroke-linejoin: round;
}
.eg-map-svg__pin {
color: var(--color-white);
}
.eg-map-svg__label {
fill: var(--color-white);
font-family: var(--font-family-base);
font-size: 28px;
font-weight: var(--font-weight-regular);
letter-spacing: normal;
paint-order: stroke;
stroke: var(--color-bg);
stroke-width: 4;
stroke-linejoin: round;
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
.eg-map-svg__label { font-size: 34px; stroke-width: 5; }
}
@media (min-width: 600px) and (max-width: 1023.98px) {
.eg-map-svg__label { font-size: 32px; stroke-width: 5; }
}
@media (max-width: 599.98px) {
.eg-map-svg__label { font-size: 40px; stroke-width: 6; }
}
@media (max-width: 1023.98px) {
.eg-hero__map {
width: 100%;
max-width: 34rem;
margin-inline: auto;
}
}
@media (min-width: 640px) {
.eg-cities .hub-group__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
.eg-cities .hub-group__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.eg-city {
position: relative;
padding-right: var(--space-8);
background-color: var(--color-white);
box-shadow: 0 2px 6px rgb(1 1 1 / 0.04), 0 12px 32px rgb(1 1 1 / 0.06);
transition: background-color var(--duration-base) var(--easing-standard),
border-color var(--duration-base) var(--easing-standard),
box-shadow var(--duration-base) var(--easing-standard),
translate var(--duration-base) var(--easing-standard);
}
.eg-city:hover,
.eg-city:focus-visible {
translate: 0 -3px;
box-shadow: 0 4px 10px rgb(1 1 1 / 0.05), 0 20px 44px rgb(1 1 1 / 0.10);
}
.eg-city__shape {
width: 2.75rem;
height: 2.75rem;
margin-bottom: var(--space-2);
fill: var(--color-accent-subtle);
stroke: var(--color-blue-light);
stroke-width: 2.5;
stroke-linejoin: round;
transition: fill var(--duration-base) var(--easing-standard);
}
.eg-city:hover .eg-city__shape,
.eg-city:focus-visible .eg-city__shape {
fill: color-mix(in srgb, var(--color-blue-light) 22%, transparent);
}
.eg-city__name {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: var(--space-2);
}
.eg-city__badge {
padding: 0.15em 0.5em;
border-radius: var(--radius-sm);
background-color: var(--color-accent-subtle);
font-size: var(--font-size-sm);
line-height: var(--line-height-base);
color: color-mix(in srgb, var(--color-blue-dark) 85%, black);
}
.eg-city__arrow {
position: absolute;
top: var(--space-5);
right: var(--space-5);
width: 1.5rem;
height: 1.5rem;
color: color-mix(in srgb, var(--color-blue-dark) 85%, black);
}
.eg-note {
max-width: 46rem;
margin-top: var(--space-7);
color: rgb(59 73 86 / 0.75);
line-height: var(--line-height-base);
}
.eg-why__list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: var(--space-7);
}
.eg-why__item {
--rule: 1;
position: relative;
padding-top: var(--space-5);
}
.eg-why__item::before {
content: "";
position: absolute;
inset-inline: 0;
top: 0;
height: 1px;
background-color: var(--color-accent);
transform: scaleX(var(--rule));
transform-origin: left center;
}
@media (min-width: 900px) {
.eg-why__item {
display: grid;
grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
gap: var(--space-7);
align-items: start;
}
}
.eg-why__title {
font-size: var(--font-size-md);
font-weight: var(--font-weight-regular);
letter-spacing: normal;
line-height: var(--line-height-heading);
}
@media (max-width: 899.98px) {
.eg-why__title { margin-bottom: var(--space-2); }
}
.eg-why__text {
max-width: 62ch;
color: var(--color-text-muted);
line-height: var(--line-height-base);
}