.uf22-materials {
  padding: clamp(32px, 4vw, 56px) 0;
  border-block: 1px solid var(--uf22-line, #2e3d46);
  background: var(--uf22-deep, #05090c);
}

.uf22-materials__layout {
  display: grid;
  grid-template-columns: minmax(180px, .7fr) minmax(0, 2fr);
  align-items: start;
  gap: 28px clamp(32px, 5vw, 80px);
}

body.page-service-utilizacionnyi-sbor-akcizy main .uf22-materials h2 {
  margin: 0;
  font-size: clamp(26px, 2.5vw, 36px);
  line-height: 1.2;
}

.uf22-materials__list {
  display: grid;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.uf22-materials__list li { min-width: 0; margin: 0; padding: 0; }
.uf22-materials__list li + li { border-top: 1px solid var(--uf22-line, #2e3d46); }

.uf22-materials__link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px;
  gap: 20px;
  align-items: center;
  min-height: 72px;
  padding: 22px 12px;
  color: var(--uf22-text, #f1f3f2);
  text-decoration: none;
  overflow-wrap: anywhere;
}

body.page-service-utilizacionnyi-sbor-akcizy main .uf22-materials h3 {
  margin: 0;
  font: 520 clamp(19px, 1.45vw, 24px)/1.45 Literata, Georgia, serif;
  letter-spacing: -.015em;
}

.uf22-materials__arrow { color: var(--uf22-red, #f34b45); font: 500 24px/1 Arial, sans-serif; }
.uf22-materials__link:hover h3 { text-decoration: underline; text-underline-offset: .2em; }
.uf22-materials__link:focus-visible { outline: 2px solid var(--uf22-red, #f34b45); outline-offset: -2px; background: var(--uf22-surface, #0d171e); }

@media (max-width: 720px) {
  .uf22-materials__layout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .uf22-materials__link { padding: 20px 8px; gap: 12px; }
}
