.m-neuron-interactive-posts {
  font-size: 40px;
  // position: relative;
  display: inline-block;
  width: 100%;
  vertical-align: top;

  &--horizontal {
    .m-neuron-interactive-posts {
      &__links {
        flex-wrap: wrap;
      }

      &__item {
        &:not(:last-of-type) {
          margin-right: 16px;
        }
      }
    }
  }

  &--vertical {
    .m-neuron-interactive-posts {
      &__links {
        flex-direction: column;
      }

      &__item {
        &:not(:last-of-type) {
          padding-bottom: 16px;
        }
      }
    }
  }

  &--grid {
    .m-neuron-interactive-posts {
      &__links {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-column-gap: 30px;
        grid-row-gap: 30px;
      }

      &__item {
        width: 100% !important;
      }
    }
  }

  &--meta-align {
    @media (min-width: $screen-sm-max) {
      &__right {
        .m-neuron-interactive-posts {
          article {
            flex-direction: row;
            align-items: center;

            a {
              margin-right: 16px;
            }
          }
        }
      }

      &__left {
        .m-neuron-interactive-posts {
          article {
            flex-direction: row;
            align-items: center;

            a {
              margin-right: 0;
              margin-left: 16px;
              order: 2;
            }
          }
        }
      }

      &__top {
        .m-neuron-interactive-posts {
          article {
            flex-direction: column-reverse;
          }
        }
      }

      &__bottom {
        .m-neuron-interactive-posts {
          article {
            flex-direction: column;
          }
        }
      }
    }

    @media (max-width: $screen-md-max) {
      &-tablet {
        &__right {
          .m-neuron-interactive-posts {
            article {
              flex-direction: row;
              align-items: center;

              a {
                margin-right: 16px;
              }
            }
          }
        }

        &__left {
          .m-neuron-interactive-posts {
            article {
              flex-direction: row;
              align-items: center;

              a {
                margin-right: 0;
                margin-left: 16px;
                order: 2;
              }
            }
          }
        }

        &__top {
          .m-neuron-interactive-posts {
            article {
              flex-direction: column-reverse;
            }
          }
        }

        &__bottom {
          .m-neuron-interactive-posts {
            article {
              flex-direction: column;
            }
          }
        }
      }
    }

    @media (max-width: $screen-sm-max) {
      &-mobile {
        &__right {
          .m-neuron-interactive-posts {
            article {
              flex-direction: row;
              align-items: center;

              a {
                margin-right: 16px;
              }
            }
          }
        }

        &__left {
          .m-neuron-interactive-posts {
            article {
              flex-direction: row;
              align-items: center;

              a {
                margin-right: 0;
                margin-left: 16px;
                order: 2;
              }
            }
          }
        }

        &__top {
          .m-neuron-interactive-posts {
            article {
              flex-direction: column-reverse;
            }
          }
        }

        &__bottom {
          .m-neuron-interactive-posts {
            article {
              flex-direction: column;
            }
          }
        }
      }
    }
  }

  &__links {
    display: flex;
    z-index: 10;
    position: relative;
  }

  &__images {
    position: absolute;
    display: block;
    margin-left: auto;
    width: 60%;
    height: 100%;
    overflow: hidden;
    right: 0;
    top: 0;
  }

  &__item {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;

    a {
      line-height: 1;
    }
  }

  &__meta-data {
    font-size: 16px;
  }

  &__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 0.3s ease;

    img {
      display: none;
    }

    &.active {
      opacity: 1;
      z-index: 1;
    }
  }

  // Image Coverage
  &--image-cover {
    &__full-screen {
      .m-neuron-interactive-posts {
        &__images {
          position: fixed;
          width: 50%;
        }
      }
    }

    &__text {
      .m-neuron-interactive-posts {
        &__item {
          z-index: auto;
          position: relative;

          &:hover {
            .m-neuron-interactive-posts__title:before {
              opacity: 1;
            }
          }
        }

        &__links {
          position: relative;
          z-index: auto;
        }

        &__title {
          display: inline-block;
          position: relative;

          color: #000;

          &:before {
            content: attr(data-text-interactive);
            position: absolute;
            mix-blend-mode: overlay;
            left: 0;
            top: 0;
            z-index: 1000;
            display: block;
            color: #fff;
            transition: opacity 0.2s ease;
            opacity: 0;
          }
        }

        &__images {
          width: 300px;
          height: 300px;
          position: fixed;
          left: 0%;
          top: 0%;
          right: auto;
          bottom: auto;
          margin-top: -20vh;
          margin-left: -100px;

          opacity: 0;
          pointer-events: none;
          z-index: 100;

          will-change: transform, opacity;
        }
      }
    }
  }

  // Image H Align
  &__image-h-align {
    &--left {
      .m-neuron-interactive-posts__images {
        right: auto;
        left: 0;
      }
    }
    &--center {
      .m-neuron-interactive-posts__images {
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
      }
    }

    &--right {
      .m-neuron-interactive-posts__images {
        left: auto;
        right: 0;
      }
    }
  }

  // Image V Align
  &__image-v-align {
    &--top {
      .m-neuron-interactive-posts__images {
        top: 0;
        bottom: auto;
      }
    }

    &--middle {
      .m-neuron-interactive-posts__images {
        bottom: 0;
        top: 50%;
        transform: translateY(-50%);
      }
    }

    &--bottom {
      .m-neuron-interactive-posts__images {
        bottom: 0;
        top: auto;
      }
    }
  }

  // Position
  &__h-align {
    &-left {
      .m-neuron-interactive-posts {
        &__links {
          align-items: flex-start;
        }

        &__item {
          text-align: left;
        }
      }
    }

    &-center {
      .m-neuron-interactive-posts {
        &__links {
          align-items: center;
        }

        &__item {
          text-align: center;
        }
      }
    }

    &-right {
      .m-neuron-interactive-posts {
        &__links {
          align-items: flex-end;
        }

        &__item {
          text-align: right;
        }
      }
    }
  }
}
