.block-6 {
  position: relative;
  z-index: 2;
  width: min(100%, 1260px);
  margin: 0 auto;
  padding: clamp(38px, 6vh, 74px) 0 clamp(40px, 7vh, 88px);
}

.block6-canvas {
  width: min(100%, 1160px);
  margin: 0 auto;
  border-top: 1px solid rgba(242, 242, 242, 0.56);
  border-bottom: 1px solid rgba(242, 242, 242, 0.56);
  padding: clamp(34px, 5.3vw, 60px) clamp(8px, 1vw, 16px) clamp(38px, 5.7vw, 68px);
}

.block6-title {
  margin: 0;
  text-align: center;
  color: #f2f2f2;
  font-size: clamp(1.72rem, 4.6vw, 3.4rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.03em;
}

.block6-layout {
  margin-top: clamp(18px, 3vw, 36px);
  display: grid;
  grid-template-columns: minmax(170px, 280px) auto minmax(170px, 280px);
  align-items: end;
  gap: clamp(8px, 1.8vw, 24px);
}

.block6-cluster {
  position: relative;
  width: min(100%, 320px);
  height: clamp(188px, 22vw, 268px);
  perspective: 900px;
}

.block6-cluster--left {
  justify-self: end;
  transform: translateX(16px);
}

.block6-cluster--right {
  justify-self: start;
  transform: translateX(-16px);
}

.block6-sticker {
  --b6-rot-z: 0deg;
  --b6-delay: 0s;
  position: absolute;
  width: 92px;
  height: auto;
  pointer-events: none;
  transform: rotate(var(--b6-rot-z)) rotateY(0deg);
  transform-style: preserve-3d;
  backface-visibility: visible;
  will-change: transform;
  animation: block6StickerFlip3d 5s cubic-bezier(0.2, 0.72, 0.22, 1) infinite;
  animation-delay: var(--b6-delay);
  animation-play-state: paused;
}

.block-6.is-anim-active .block6-sticker {
  animation-play-state: running;
}

.block6-sticker--github {
  width: clamp(80px, 6.2vw, 114px);
  left: -6%;
  top: -8%;
  --b6-rot-z: -11deg;
  --b6-delay: 0s;
}

.block6-sticker--github[src*="css_adesivo.svg"] {
  width: clamp(70px, 5.2vw, 98px);
}

.block6-sticker--raspberry {
  width: clamp(84px, 6.4vw, 116px);
  left: 44%;
  top: 34%;
  --b6-rot-z: 12deg;
  --b6-delay: 0.45s;
}

.block6-sticker--linux {
  width: clamp(72px, 5.7vw, 104px);
  left: 6%;
  bottom: -8%;
  --b6-rot-z: -7deg;
  --b6-delay: 0.9s;
}

.block6-sticker--docker {
  width: clamp(88px, 6.7vw, 124px);
  left: 58%;
  bottom: -18%;
  --b6-rot-z: -14deg;
  --b6-delay: 1.35s;
}

.block6-sticker--docker[src*="notion_adesivo.svg"] {
  width: clamp(72px, 5.2vw, 102px);
  bottom: -8%;
}

.block6-cluster--right .block6-sticker--github {
  left: 54%;
  top: -10%;
  --b6-rot-z: 10deg;
  --b6-delay: 0.2s;
}

.block6-cluster--right .block6-sticker--raspberry {
  left: 8%;
  top: 36%;
  --b6-rot-z: -10deg;
  --b6-delay: 0.65s;
}

.block6-cluster--right .block6-sticker--linux {
  left: 58%;
  bottom: -10%;
  --b6-rot-z: 7deg;
  --b6-delay: 1.1s;
}

.block6-cluster--right .block6-sticker--docker {
  left: 8%;
  bottom: -18%;
  --b6-rot-z: 11deg;
  --b6-delay: 1.55s;
}

@keyframes block6StickerFlip3d {
  0%,
  14% {
    transform: rotate(var(--b6-rot-z)) rotateY(0deg) rotateX(0deg);
  }

  28% {
    transform: rotate(var(--b6-rot-z)) rotateY(180deg) rotateX(10deg);
  }

  42% {
    transform: rotate(var(--b6-rot-z)) rotateY(360deg) rotateX(0deg);
  }

  100% {
    transform: rotate(var(--b6-rot-z)) rotateY(360deg) rotateX(0deg);
  }
}

.block6-center-badge {
  position: relative;
  display: grid;
  place-items: center;
  justify-self: center;
  width: clamp(170px, 16vw, 236px);
  aspect-ratio: 1;
  text-decoration: none;
}

.block6-center-star {
  display: block;
  margin: 0 auto;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: 50% 50%;
  will-change: transform;
  animation: none;
  transition: filter 220ms ease;
}

@keyframes block6CenterStarSpin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.block6-center-text {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #f2f2f2;
  font-size: clamp(0.86rem, 1.18vw, 1.52rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.01em;
  transition: color 220ms ease;
}

.block6-center-arrow {
  position: absolute;
  left: 50%;
  top: 68%;
  width: clamp(32px, 2.8vw, 46px);
  height: auto;
  transform: translate(-50%, -50%);
  transition: filter 220ms ease;
}

.block6-center-badge:hover .block6-center-star,
.block6-center-badge:focus-visible .block6-center-star {
  animation: block6CenterStarSpin 920ms cubic-bezier(0.12, 0.9, 0.24, 1) 1 both;
  filter: hue-rotate(-3deg) saturate(1.03) brightness(1.02);
}

.block6-center-badge:hover .block6-center-text,
.block6-center-badge:focus-visible .block6-center-text {
  color: #f6fff9;
}

.block6-center-badge:hover .block6-center-arrow,
.block6-center-badge:focus-visible .block6-center-arrow {
  filter: brightness(1.03) saturate(1.02);
}

@media (max-width: 1120px) {
  .block-6 {
    width: min(100%, 980px);
    padding: 30px 0 56px;
  }

  .block6-layout {
    grid-template-columns: minmax(150px, 240px) auto minmax(150px, 240px);
    gap: 10px;
  }

  .block6-cluster {
    height: clamp(156px, 23vw, 214px);
  }

  .block6-cluster--left {
    transform: translateX(12px);
  }

  .block6-cluster--right {
    transform: translateX(-12px);
  }
}

@media (max-width: 760px) {
  .block6-canvas {
    padding: 26px 0 28px;
  }

  .block6-title {
    font-size: clamp(1.24rem, 7.2vw, 1.84rem);
  }

  .block6-layout {
    margin-top: 14px;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 10px;
  }

  .block6-cluster {
    width: min(100%, 300px);
    height: 112px;
  }

  .block6-center-badge {
    order: 2;
    width: clamp(146px, 38vw, 182px);
  }

  .block6-cluster--left {
    order: 1;
    justify-self: center;
    transform: none;
  }

  .block6-cluster--right {
    order: 3;
    justify-self: center;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .block6-sticker {
    animation: none;
    transform: rotate(var(--b6-rot-z));
  }

  .block6-center-star {
    animation: none;
    transform: none;
  }
}