.horizontal-posts {
  position: relative;
  height: 100vh;

  .container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
  }

  .horizontal-posts__background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;

    .horizontal-posts__background-item-wrapper {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      clip-path: polygon(0 0, 0% 100%, 100% 0);
      opacity: 0;

      &[data-index="0"] {
        opacity: 1;
      }

      .horizontal-posts__background-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        pointer-events: none;
      }
    }

    .horizontal-posts__background-video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      pointer-events: none;
    }
  }

  .horizontal-posts__inner {
    overscroll-behavior: none;
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: var(--px-40);
    height: 100%;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    scrollbar-width: none;

    &::-webkit-scrollbar {
      display: none;
    }

    .horizontal-posts__item-wrapper {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      flex-wrap: nowrap;
    }

    .horizontal-posts__item-wrapper .post-card {
      width: var(--px-300);
      height: var(--px-430);
      background-color: var(--wp--preset--color--base);
      color: var(--wp--preset--color--contrast);

      .post-card__content {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
        padding: var(--px-16);

        .post-card__title {
          position: relative;
          font-size: var(--px-16);
          margin-bottom: var(--px-16);
          font-family: var(--wp--preset--font-family--tanovis-bold);
          text-transform: uppercase;
          padding-right: var(--px-24);
          line-height: 1.05;

          &::after {
            content: "";
            position: absolute;
            top: var(--px-2);
            right: var(--px-2);
            display: block;
            width: var(--px-16);
            height: var(--px-16);
            background-color: var(--wp--preset--color--primary);
          }
        }

        .post-card__excerpt {
          margin-bottom: var(--px-16);
        }
      }
    }
  }
}