.network {
  color: white;
  background: linear-gradient(124deg, var(--navy) 28%, #17274d 100%);
}
.network-head > p { color: #d4ddf3; }
.network-track {
  --logo-gap: 12px;
  --logo-columns: 5;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--logo-columns) - 1) * var(--logo-gap)) / var(--logo-columns));
  gap: var(--logo-gap);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scrollbar-color: #7488bd #1d3058;
  scrollbar-width: thin;
  margin: 0;
  padding: 0 0 9px;
  list-style: none;
}
.network-logo {
  display: grid;
  place-items: center;
  height: clamp(100px, 10vw, 140px);
  border: 1px solid #596f9e80;
  border-radius: 5px;
  background: #25385f80;
  scroll-snap-align: start;
}
.network-logo img {
  width: min(96%, 273px);
  height: 100%;
  min-height: 0;
  object-fit: contain;
}
.network-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 13px;
}
.network-progress {
  color: #c7d4f4;
  font: 700 .73rem/1.3 var(--mono);
  letter-spacing: .08em;
}
.network-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.network-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 43px;
  padding: 0 12px;
  border: 1px solid #7589ba;
  border-radius: 4px;
  background: transparent;
  color: white;
  font-size: .83rem;
  font-weight: 700;
}
.network-actions button:hover { background: #304776; }
.network-actions button[aria-disabled="true"] { opacity: .55; cursor: default; }
.network-actions button[aria-disabled="true"]:hover { background: transparent; }
.network-actions .icon { width: 16px; height: 16px; }
[data-carousel-prev] .icon { transform: rotate(180deg); }

.network-directory {
  margin-top: 27px;
  border-block: 1px solid #5f74a280;
}
.network-directory summary {
  display: flex;
  min-height: 53px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: white;
  cursor: pointer;
  list-style: none;
  font-size: .92rem;
  font-weight: 700;
}
.network-directory summary::-webkit-details-marker { display: none; }
.network-directory summary:hover { color: #c5d4ff; }
.network-directory[open] summary .icon { transform: rotate(45deg); }
.network-directory ul {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 13px;
  margin: 0;
  padding: 0 0 18px;
  list-style: none;
}
.network-directory li {
  padding: 11px 12px;
  border: 1px solid #596f9e80;
  border-radius: 4px;
}
.network-directory strong,
.network-directory li span { display: block; }
.network-directory strong { font-size: .87rem; }
.network-directory li span { margin-top: 4px; color: #c7d4f4; font-size: .78rem; }

@media (max-width: 1050px) {
  .network-track { --logo-columns: 4; }
}
@media (max-width: 760px) {
  .network-track { --logo-columns: 3; }
  .network-directory ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 530px) {
  .network-track { --logo-columns: 2; --logo-gap: 8px; }
  .network-directory ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}