.art {
  background-color: var(--color-blue-alt);
  position: relative;

  &:before {
    background-color: var(--color-green);
    content: '';
    height: 35%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, 0);
    width: 768px;
  }
}

.articles {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  transform: translate(0, -5.5rem);
}

.articles article {
  aspect-ratio: 16 / 10;
  background-color: var(--bg-cards);
  border-radius: 2rem;
  color: white;
  padding: 1rem;
  text-align: center;
  width: min(90%, 25rem);

  & img {
    display: inline-block;
    margin-block: 1rem;
    width: 4rem;
  }

  & h3 {
    margin-bottom: 0.5rem;
    position: relative;

    &:before {
      background-color: #95c121;
      bottom: 100%;
      content: '';
      height: 0.25rem;
      left: 50%;
      position: absolute;
      transform: translate(-50%, -200%);
      width: 40%;
    }
  }

  & p {
    margin-bottom: 1lh;
  }
}

@media (max-width: 768px) {
  .art:before {
    content: none;
  }

  .articles {
    align-items: center;
    flex-direction: column;
    gap: 2rem;
    padding-block: 2rem;
  }
}

[data-animate] {
  will-change: transform, opacity;
}

[data-animate-fadeinup] {
  opacity: 0;
  transform: translateY(100px);
  transition: transform 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 1.5s cubic-bezier(0.39, 0.575, 0.565, 1);
  
  &.active {
    opacity: 1;
    transform: translateY(0);
  }
}

[data-animate-rubberband] {
  animation: none;
  
  &.active {
    animation: rubberBand 1s ease;
  }
}

@keyframes rubberBand {
  0% {
    transform: scale3d(1, 1, 1);
  }

  30% {
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    transform: scale3d(.95, 1.05, 1);
  }

  75% {
    transform: scale3d(1.05, .95, 1);
  }

  100% {
    transform: scale3d(1, 1, 1);
  }
}