.wg-brands {
  --wg-brand-accent: var(--webglobe-accent, #f04b4b);
  --wg-brand-ink: var(--webglobe-ink, #1b1b1b);
  width: 100%;
}

.page-manufacturer:has(.wg-brands) .columns-container > .row > #left-column {
  display: none;
}

.page-manufacturer:has(.wg-brands) .columns-container > .row > #center-column {
  width: 100%;
  max-width: 100%;
  flex: 0 0 100%;
}

.wg-brands__header {
  display: grid;
  max-width: 42rem;
  margin-bottom: clamp(1.75rem, 4vw, 3.25rem);
  gap: .45rem;
}

.wg-brands__eyebrow {
  display: flex;
  align-items: center;
  gap: .65rem;
  color: var(--wg-brand-accent);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.wg-brands__eyebrow::before {
  width: 2rem;
  height: 1px;
  background: currentColor;
  content: "";
}

.wg-brands__title {
  margin: 0;
  color: var(--wg-brand-ink);
  font-size: clamp(2rem, 5vw, 3.75rem);
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: 1;
}

.wg-brands__intro {
  max-width: 34rem;
  margin: .45rem 0 0;
  color: var(--bs-secondary-color);
  font-size: clamp(.875rem, 1.4vw, 1rem);
  line-height: 1.6;
}

.wg-brands__grid {
  display: grid;
  margin: 0;
  padding: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(.75rem, 1.4vw, 1.15rem);
  list-style: none;
}

.wg-brand-card {
  --wg-brand-pointer-x: 50%;
  --wg-brand-pointer-y: 50%;
  --wg-brand-rotate-x: 0deg;
  --wg-brand-rotate-y: 0deg;
  --wg-brand-arrow-x: 0px;
  --wg-brand-arrow-y: 0px;
  position: relative;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgb(27 27 27 / .08);
  border-radius: 1rem;
  background: #fff;
  isolation: isolate;
  box-shadow: 0 .25rem 1.25rem rgb(20 20 20 / .035);
  transform: perspective(900px) rotateX(var(--wg-brand-rotate-x)) rotateY(var(--wg-brand-rotate-y));
  transform-style: preserve-3d;
  transition:
    border-color .28s ease,
    box-shadow .35s cubic-bezier(.2, .75, .25, 1),
    transform .2s cubic-bezier(.2, .75, .25, 1);
}

.wg-brand-card::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    radial-gradient(
      circle 15rem at var(--wg-brand-pointer-x) var(--wg-brand-pointer-y),
      color-mix(in srgb, var(--wg-brand-accent) 16%, transparent),
      transparent 66%
    );
  content: "";
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}

.wg-brand-card::after {
  position: absolute;
  z-index: 0;
  top: -45%;
  left: -75%;
  width: 44%;
  height: 190%;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / .8), transparent);
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: rotate(18deg) translateX(0);
}

.wg-brand-card:hover,
.wg-brand-card:focus-within {
  border-color: color-mix(in srgb, var(--wg-brand-accent) 40%, transparent);
  box-shadow:
    0 1.35rem 3.25rem rgb(20 20 20 / .12),
    0 0 0 1px color-mix(in srgb, var(--wg-brand-accent) 10%, transparent);
  transform:
    perspective(900px)
    translateY(-.42rem)
    rotateX(var(--wg-brand-rotate-x))
    rotateY(var(--wg-brand-rotate-y));
}

.wg-brand-card:hover::before,
.wg-brand-card:focus-within::before {
  opacity: 1;
}

.wg-brand-card:hover::after,
.wg-brand-card:focus-within::after {
  animation: wg-brand-shine .85s cubic-bezier(.2, .65, .25, 1) forwards;
}

.wg-brand-card.is-pressed {
  transform: perspective(900px) translateY(-.08rem) scale(.975);
  transition-duration: .08s;
}

.wg-brand-card__link {
  position: relative;
  z-index: 1;
  display: grid;
  min-width: 0;
  height: 100%;
  padding: clamp(1rem, 2.2vw, 1.5rem);
  grid-template-rows: minmax(7.5rem, 1fr) auto;
  color: var(--wg-brand-ink);
  text-decoration: none;
}

.wg-brand-card__link:focus-visible {
  border-radius: inherit;
  outline: 2px solid var(--wg-brand-accent);
  outline-offset: -3px;
}

.wg-brand-card__media {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: clamp(7.5rem, 12vw, 10rem);
  place-items: center;
}

.wg-brand-card__media::before {
  position: absolute;
  width: min(68%, 10rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: color-mix(in srgb, var(--wg-brand-accent) 8%, transparent);
  content: "";
  filter: blur(1.2rem);
  opacity: 0;
  transform: scale(.7);
  transition: opacity .35s ease, transform .45s cubic-bezier(.2, .8, .2, 1);
}

.wg-brand-card:hover .wg-brand-card__media::before,
.wg-brand-card:focus-within .wg-brand-card__media::before {
  opacity: 1;
  transform: scale(1);
}

.wg-brand-card__media picture {
  display: contents;
}

.wg-brand-card__image {
  display: block;
  width: auto;
  max-width: min(82%, 12rem);
  height: auto;
  max-height: 6.75rem;
  object-fit: contain;
  filter: saturate(.96);
  transform: translateZ(1.25rem) scale(.94);
  transition:
    filter .35s ease,
    transform .42s cubic-bezier(.16, 1, .3, 1);
}

.wg-brand-card:hover .wg-brand-card__image,
.wg-brand-card:focus-within .wg-brand-card__image {
  filter: saturate(1.12) drop-shadow(0 .6rem .75rem rgb(20 20 20 / .12));
  transform: translateZ(2.25rem) scale(1.075);
}

.wg-brand-card__body {
  display: grid;
  min-width: 0;
  padding-top: 1rem;
  gap: .55rem;
  border-top: 1px solid rgb(27 27 27 / .07);
}

.wg-brand-card__name {
  position: relative;
  width: max-content;
  max-width: 100%;
  overflow: hidden;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wg-brand-card__name::after {
  position: absolute;
  right: 0;
  bottom: -.2rem;
  left: 0;
  height: 1px;
  background: var(--wg-brand-accent);
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s cubic-bezier(.2, .75, .25, 1);
}

.wg-brand-card:hover .wg-brand-card__name::after,
.wg-brand-card:focus-within .wg-brand-card__name::after {
  transform: scaleX(1);
}

.wg-brand-card__meta {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  color: var(--bs-secondary-color);
  font-size: .75rem;
}

.wg-brand-card__arrow {
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  flex: 0 0 2rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bs-tertiary-bg);
  color: var(--wg-brand-ink);
  transform: translate(var(--wg-brand-arrow-x), var(--wg-brand-arrow-y));
  transition:
    background-color .25s ease,
    box-shadow .3s ease,
    color .25s ease,
    transform .18s cubic-bezier(.2, .8, .2, 1);
}

.wg-brand-card__arrow svg {
  display: block;
  width: 1rem;
  height: 1rem;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.wg-brand-card:hover .wg-brand-card__arrow,
.wg-brand-card:focus-within .wg-brand-card__arrow {
  background: var(--wg-brand-accent);
  box-shadow: 0 .45rem 1rem color-mix(in srgb, var(--wg-brand-accent) 32%, transparent);
  color: #fff;
  transform:
    translate(calc(var(--wg-brand-arrow-x) + .12rem), var(--wg-brand-arrow-y))
    scale(1.08);
}

.wg-brand-card:hover .wg-brand-card__arrow svg,
.wg-brand-card:focus-within .wg-brand-card__arrow svg {
  animation: wg-brand-arrow .55s cubic-bezier(.2, .75, .25, 1);
}

.wg-brand-card__ripple {
  position: absolute;
  z-index: 2;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--wg-brand-accent) 24%, transparent);
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
  animation: wg-brand-ripple .55s ease-out forwards;
}

@keyframes wg-brand-ripple {
  to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(22);
  }
}

@keyframes wg-brand-shine {
  0% {
    opacity: 0;
    transform: rotate(18deg) translateX(0);
  }

  18% {
    opacity: .7;
  }

  100% {
    opacity: 0;
    transform: rotate(18deg) translateX(470%);
  }
}

@keyframes wg-brand-arrow {
  0%,
  100% {
    transform: translateX(0);
  }

  45% {
    transform: translateX(.22rem);
  }
}

@media (min-width: 480px) {
  .wg-brands__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .wg-brands__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .wg-brands__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1600px) {
  .wg-brands__grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .wg-brand-card,
  .wg-brand-card__image,
  .wg-brand-card__arrow,
  .wg-brand-card__media::before,
  .wg-brand-card__name::after {
    transition: none;
  }

  .wg-brand-card,
  .wg-brand-card:hover,
  .wg-brand-card:focus-within,
  .wg-brand-card.is-pressed {
    transform: none;
  }

  .wg-brand-card__ripple {
    display: none;
  }

  .wg-brand-card::after,
  .wg-brand-card__arrow svg {
    animation: none !important;
  }
}