html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: no-preference) {
  .effects-ready .reveal-on-scroll {
    opacity: 0;
    filter: blur(8px);
    transform: translate3d(0, 28px, 0);
    transition:
      opacity 900ms ease,
      filter 900ms ease,
      transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, filter, transform;
  }

  .effects-ready .reveal-on-scroll.is-visible {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
  }

  .effects-ready .parallax-media {
    transform: translate3d(0, var(--parallax-y, 0px), 0) scale(1.07) !important;
    transition: transform 120ms linear;
    will-change: transform;
  }

  .effects-ready #hero .parallax-media {
    transform: translate3d(0, var(--parallax-y, 0px), 0) scale(1.04) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .reveal-on-scroll,
  .parallax-media {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
  }
}

#sobre > div > div > div:last-child {
  isolation: isolate;
}

#sobre > div > div > div:last-child > .absolute.inset-0 {
  z-index: 2;
}

#sobre > div > div > div:last-child > .absolute:not(.inset-0) {
  z-index: 1;
  pointer-events: none;
}

@media (max-width: 767px) {
  #sobre > div > div > div:first-child > .flex.flex-wrap.gap-6 {
    justify-content: center;
  }

  #sobre > div > div > div:first-child > .flex.flex-wrap.gap-6 > div {
    flex: 0 1 82px;
  }

  #sobre > div > div > div:first-child > .flex.flex-wrap.gap-6 > div:nth-child(4) {
    flex-basis: 100%;
    margin-top: 0.5rem;
  }

  #sobre > div > div > div:first-child > .mt-8.p-4.border {
    display: flex;
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    justify-content: center;
  }
}