.unordered-list__variation {
  display: flex;
  flex-direction: column;
  row-gap: 24px;
  position: relative;

  & .unordered-list__post {
    display: flex;
    gap: 48px;
    width: 100%;

    .spacer {
      display: block;
      flex: 1;
      width: 624px;
    }

    & .unordered-list__post-info {
      flex: 1;
      display: flex;
      justify-content: end;

      &:hover .unordered-list__post-content,
      &.unordered-list__post-info--active .unordered-list__post-content {
        max-width: 100%;
      }

      & .unordered-list__post-content {
        flex: 1;
        border-top: 1px solid #D9D8D6;
        max-width: 548px;
        position: relative;
        transition: max-width 0.6s ease-in-out;

        &::before {
          content: "";
          position: absolute;
          top: -1px;
          left: 0;
          height: 1px;
          width: 0;
          background: #000000;
          transition: width 0.4s ease-in-out;
        }

        &.unordered-list__post-content--active::before {
          width: 100%;
        }

        &.unordered-list__post-content--active .unordered-list__post-text a .unordered-list__post-title {
          opacity: 1;
        }
      }



      & .unordered-list__post-text {
        padding: 12px 0;

        & .unordered-list__post-link {
          display: content;

          & .unordered-list__post-title {
            font-weight: 700;
            font-size: 24px;
            line-height: 150%;
            opacity: 0.6;
            transition: opacity 0.4s ease-in-out;
          }
        }
      }
    }
  }
}

.unordered-list__shared-image-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 624px;
  height: 600px;
  pointer-events: none;
  overflow: hidden;
}

.unordered-list__shared-image-container .unordered-list__shared-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.unordered-list__shared-image-container .unordered-list__shared-image.active {
  opacity: 1;
}

@media (max-width: 1360px) {
  .unordered-list__variation {
    & .unordered-list__post {
      .spacer {
        display: none;
      }

      & .unordered-list__post-info {
        & .unordered-list__post-content {
          max-width: 95%;
        }
      }
    }
  }

  .unordered-list__shared-image-container {
    position: relative;
    margin: 0 auto;
    margin-bottom: 12px;
    width: 100%;
    height: 100%;
    min-width: 600px;
    min-height: 554px;
    max-width: 624px;
    max-height: 600px;
  }
}

@media (max-width: 720px) {
  .unordered-list__variation {
    row-gap: 12px;

    & .unordered-list__post {
      & .unordered-list__post-info {
        & .unordered-list__post-text {
          padding: 16px 0;

          & a h2 {
            font-size: 20px !important;
            line-height: 28px !important;
          }
        }
      }
    }
  }

  .unordered-list__shared-image-container {
    min-width: 342px;
    min-height: 387px;
    max-width: 624px;
    max-height: 600px;
  }
}