.main-navigation.with-explore { justify-content: space-between; gap: 8px; }
.with-explore .nav-choice { padding-inline: 16px; }
.explore-panel { width: 100%; right: 0; top: 2px; padding: 28px 22px; border: 1.5px solid #d9ecff; border-radius: 16px; box-shadow: 0 16px 35px #26334a12; }
.explore-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 16px; }
.explore-link { display: flex; align-items: center; gap: 18px; padding: 14px 12px; border-radius: 12px; min-width: 0; color: var(--ink); }
.explore-link .illustrated-icon { flex: 0 0 70px; width: 70px; height: 70px; }
.explore-link > span { min-width: 0; }
.explore-link strong { display: block; font-size: 21px; font-weight: 900; line-height: 1.25; margin-bottom: 5px; }
.explore-link small { display: block; font-size: 15px; line-height: 1.45; color: #43547e; }
.explore-link:focus-visible { outline: 3px solid #087cff; outline-offset: 2px; background: #f0f7ff; }
@media (hover: hover) and (pointer: fine) {
 .explore-link:hover { background: #f0f7ff; text-decoration: none; }
}
@media (min-width: 821px) and (max-width: 1150px) {
 .with-explore .nav-choice { font-size: 16px; gap: 8px; padding-inline: 10px; }
 .with-explore .nav-choice .illustrated-icon { width: 36px; height: 36px; }
 .explore-link { gap: 12px; padding-inline: 6px; }
 .explore-link .illustrated-icon { flex-basis: 54px; width: 54px; height: 54px; }
 .explore-link strong { font-size: 18px; }
 .explore-link small { font-size: 13px; }
}
@media (max-width: 820px) {
 .main-navigation.with-explore { align-items: stretch; gap: 4px; }
 .with-explore .nav-choice { justify-content: flex-start; padding-inline: 15px; }
 .panels:has(.explore-panel:not([hidden])) { height: auto; }
 .explore-panel { position: relative; top: 0; right: auto; width: 100%; max-height: none; overflow: visible; padding: 16px 12px; margin: 4px 0 16px; }
 .explore-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
 .explore-link { gap: 12px; padding: 12px 8px; }
 .explore-link .illustrated-icon { flex-basis: 52px; width: 52px; height: 52px; }
 .explore-link strong { font-size: 18px; }
 .explore-link small { font-size: 14px; }
}
@media (max-width: 580px) {
 .explore-links { grid-template-columns: minmax(0, 1fr); gap: 4px; }
 .explore-link { gap: 16px; padding: 12px 10px; }
}