[data-component-id="incmty:noticia"] {
  /* Animaciones para items cargados via BigPipe */
  &.bigpipe-loaded {
    animation: slideInUp 0.5s ease-out forwards;
    opacity: 0;
    transform: translateY(20px);
  }

  border-radius: 26px;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;

  & .image-loader {
    position: relative;
    display: grid;

    & img {
      width: 100%;
      height: 100%;
      max-width: none;
      object-fit: cover;
      aspect-ratio: 328/184.5;
      background-color: black;
      object-fit: cover;
    }
  }

  & .noticia__content {
    padding: 16px 32px 32px 32px;
    gap: 16px;
    background-color: #fff;
    display: flex;
    height: 100%;
    flex-direction: column;

    & .noticia__categories {
      border-bottom: 2px solid var(--divider-color);

      & span {
        font-size: 12px;
        font-style: normal;
        font-weight: 700;
        line-height: 14px;
        text-transform: uppercase;

        &::after {
          content: ",";
          display: inline-block;
          width: max-content;
        }

        &:last-child {
          &::after {
            display: none;
          }
        }
      }
    }

    & h2 {
      color: var(--text-color);
    }

    & .noticia__cta {
      margin-top: auto;
      
      a {
        &:hover {
          color: var(--button-bg-color);
	        text-decoration: none;
        }
      }
    }

    &.link-arrow.right:hover {
      color: var(--button-bg-color);
      text-decoration: none;
    }
  }
}

@media screen and (min-width: 1024px) {
  [data-component-id="incmty:noticia"] {
    & img {
      aspect-ratio: 346.67/195;
    }
  }
}

@media screen and (min-width: 1920px) {
  [data-component-id="incmty:noticia"] {
    & img {
      aspect-ratio: 560/315;
    }
  }
}

@keyframes slideInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes rotateplane {
  0% {
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
  }
  50% {
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
  }
  100% {
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}