@layer velora.components {
  .vl-connect-industries {
    padding: clamp(6rem, 11vw, 11rem) 0;
    background: var(--vl-vivo-page-bg);
    color: var(--vl-vivo-page-text);
  }
  .vl-connect-industries__head {
    display: grid;
    grid-template-columns: minmax(145px, 1fr) minmax(0, 2.05fr) minmax(170px, .9fr);
    align-items: end;
    gap: clamp(1.5rem, 4vw, 5rem);
    padding-bottom: clamp(3rem, 6vw, 6rem);
  }
  .vl-connect-industries__head h2 {
    margin: 1.3rem 0 0;
    font: 550 clamp(3rem, 5.5vw, 6.2rem)/.96 var(--vl-connect-font-display);
    letter-spacing: -.07em;
  }
  .vl-connect-industries__head h2 em { color: var(--vl-connect-red); font-style: normal; }
  .vl-connect-industries__head > p {
    max-width: 24rem;
    margin: 0;
    color: var(--vl-connect-ink-soft);
    font: 420 .95rem/1.6 var(--vl-connect-font-body);
  }
  .vl-connect-industries__list { border-top: 1px solid var(--vl-connect-line); }
  .vl-connect-industries__row {
    position: relative;
    display: grid;
    grid-template-columns: minmax(100px, .5fr) minmax(250px, 1.8fr) minmax(180px, 1fr) minmax(145px, .7fr);
    align-items: center;
    gap: clamp(1rem, 2.5vw, 3rem);
    min-height: clamp(105px, 11vw, 155px);
    padding: 1.5rem .2rem;
    border-bottom: 1px solid var(--vl-connect-line);
    transition: padding-inline .45s var(--vl-connect-ease), background .45s var(--vl-connect-ease);
  }
  .vl-connect-industries__row::before {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 2px;
    background: var(--vl-connect-red);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .55s var(--vl-connect-ease);
  }
  .vl-connect-industries__row:is(:hover, :focus-visible) {
    padding-inline: clamp(.5rem, 1.5vw, 1.5rem);
    background: color-mix(in srgb, var(--vl-connect-red) 5%, transparent);
  }
  .vl-connect-industries__row:is(:hover, :focus-visible)::before { transform: scaleX(1); }
  .vl-connect-industries__row > span,
  .vl-connect-industries__row > strong,
  .vl-connect-industries__more {
    font: 700 .62rem/1.35 var(--vl-connect-font-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .vl-connect-industries__row > span { color: var(--vl-connect-red); }
  .vl-connect-industries__row h3 {
    margin: 0;
    font: 540 clamp(1.65rem, 3vw, 3.3rem)/1 var(--vl-connect-font-display);
    letter-spacing: -.06em;
  }
  .vl-connect-industries__row > p {
    max-width: 25rem;
    margin: 0;
    color: var(--vl-connect-ink-soft);
    font: 420 .94rem/1.5 var(--vl-connect-font-body);
  }
  .vl-connect-industries__row > strong { justify-self: end; text-align: right; }
  .vl-connect-industries__row--pending > strong { color: var(--vl-connect-ink-soft); }
  .vl-connect-industries__more {
    display: inline-flex;
    gap: 1.5rem;
    margin-top: 2.5rem;
    padding-bottom: .7rem;
    border-bottom: 1px solid var(--vl-connect-red);
    color: var(--vl-connect-red);
  }
  .vl-connect-industries__more span { transition: transform .3s ease; }
  .vl-connect-industries__more:hover span { transform: translate(4px, -4px); }
}
@layer velora.overrides {
  @media (max-width: 1050px) {
    .vl-connect-industries__head { grid-template-columns: 130px 1fr; }
    .vl-connect-industries__head > p { grid-column: 2; }
    .vl-connect-industries__row { grid-template-columns: 100px 1.25fr 1fr; }
    .vl-connect-industries__row > strong { grid-column: 2 / -1; justify-self: start; text-align: left; }
  }
  @media (max-width: 750px) {
    .vl-connect-industries__head { display: block; }
    .vl-connect-industries__head > div:nth-child(2) { margin-top: 3rem; }
    .vl-connect-industries__head > p { margin-top: 1.5rem; }
    .vl-connect-industries__row { grid-template-columns: 1fr auto; gap: .75rem; padding-block: 1.8rem; }
    .vl-connect-industries__row > span { grid-column: 1 / -1; }
    .vl-connect-industries__row h3 { grid-column: 1 / -1; }
    .vl-connect-industries__row > p { grid-column: 1; }
    .vl-connect-industries__row > strong { grid-column: 2; justify-self: end; max-width: 120px; text-align: right; }
  }
  @media (max-width: 480px) {
    .vl-connect-industries__head h2 { font-size: clamp(2.7rem, 11vw, 4rem); }
    .vl-connect-industries__row > p,
    .vl-connect-industries__row > strong { grid-column: 1 / -1; justify-self: start; text-align: left; }
  }
  @media (prefers-reduced-motion: reduce) {
    .vl-connect-industries__row,
    .vl-connect-industries__row::before,
    .vl-connect-industries__more span { transition: none; }
  }
}
