.intro-section {
  padding-bottom: var(--block-space-lg);
}

.intro-image {
  position: relative;
  border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
  overflow: hidden;
  background-color: var(--background-color);
  margin: 0;
  max-height: 400px;

  &:after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 300px;
    background-image: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.15) 25%,
      rgba(255, 255, 255, 0.5) 50%,
      rgba(255, 255, 255, 0.85) 75%,
      rgba(255, 255, 255, 1) 100%
    );
  }
}

.intro-list {
  position: relative;

  @container (min-width: 769px) {
    margin-top: -66px;
    z-index: 2;
    padding-inline: 3rem;
  }
}

/* .intro-inner {
  display: grid;
  align-items: center;
  gap: var(--spacing);
  grid-template-columns: 1fr;

  @container (min-width: 1025px) {
    grid-template-columns: 1fr 1fr;
    background-size: 120px;
  }
}

.intro-container {
  position: relative;
  z-index: 1;
  --spacing: clamp(32px, 5vw, 64px);
  padding: var(--spacing);
  overflow: hidden;

 
  --intro-scale-x: 1;
  --intro-scale-y: 1;
  --intro-radius: var(--border-radius-lg);
  --intro-pattern-scale-x: 1;
  --intro-pattern-scale-y: 1;
}

.intro-bg {
  background-color: var(--neutral-400);
  position: absolute;
  inset: 0;
  z-index: -1;
  will-change: transform;
  transform-origin: center center;
  transform: scaleX(var(--intro-scale-x, 1)) scaleY(var(--intro-scale-y, 1));
  border-radius: var(--intro-radius, var(--border-radius-lg));
  overflow: hidden;
}

.intro-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.04;
  background-image: url("../../images/cloudraw-icons-pattern2.svg");
  background-size: 60px;
  background-repeat: repeat-y;
  background-position: top right;
  will-change: transform;
  transform-origin: center center;
  transform: scaleX(var(--intro-pattern-scale-x, 1)) scaleY(var(--intro-pattern-scale-y, 1));

  @container (min-width: 1025px) {
    background-size: 120px;
  }
}

@keyframes scaleOnScroll {
  from {
    transform: scaleX(0.8) scaleY(0.5);
    border-radius: 0;
  }

  to {
    transform: scaleX(1) scaleY(1);
    border-radius: var(--border-radius-lg);
  }
}

@keyframes counterScale {
  from {
    transform: scaleX(1.25) scaleY(2);
  }

  to {
    transform: scaleX(1) scaleY(1);
  }
}


@supports (animation-timeline: --intro-timeline) {
  .intro-container {
    view-timeline-name: --intro-timeline;
  }

  .intro-bg {
    animation: scaleOnScroll linear forwards;
    animation-timeline: --intro-timeline;
    animation-range: entry 0% cover 40%;
  }

  .intro-bg::before {
    animation: counterScale linear forwards;
    animation-timeline: --intro-timeline;
    animation-range: entry 0% cover 40%;
  }
}


.intro-image {
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  padding: clamp(1rem, 5vw, var(--block-space-sm));
  background-color: var(--background-color);

  @container (max-width: 900px) {
    order: -1;
  }
}

.intro-image-wrap {
  overflow: hidden;
  border-radius: var(--border-radius-lg);
}

.intro-title {
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 600;
  margin-bottom: 26px;
} */