#cinematic-section {
  max-width: var(--premary_width);
  margin: 45px auto;

  @media (max-width: 1300px) {
    padding: 0rem 10px;
  }

  & .articles-feed {
    display: flex;
    flex-direction: column;
    gap: 3rem;


    &.two_Columns {
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 2rem !important;

      & .cinematic-card {
        width: calc(100% / 2 - 1rem);
      }

      @media (max-width: 930px) {
        flex-direction: column !important;

        & .cinematic-card {
          width: 100% !important;
        }
      }
    }

    & .cinematic-card {
      position: relative;
      height: 600px;
      border-radius: 1.5rem;
      overflow: hidden;
      cursor: pointer;

      &.retro-border {
        border: 2px solid var(--Lunara_Last_Posts_v1_Retro_Border_Color);
        box-shadow: 4px 4px 0px 0px var(--Lunara_Last_Posts_v1_Retro_Border_Color);
        transition: border-color 0.3s, box-shadow 0.3s;
        border-radius: 0 !important;
      }

      &:hover {
        .card-bg-image {
          transform: scale(1.05);
        }
      }

      & .card-bg-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 1s ease;
      }

      & .card-overlay {
        position: absolute;
        inset: 0;
        background-image: linear-gradient(to top,
            rgba(0, 0, 0, 0.8),
            rgb(41 41 41 / 45%),
            transparent);
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 3rem;
        padding: 3rem 1.5rem 1.5rem;

        & .card-tag {
          font-weight: 700;
          text-transform: uppercase;
          color: #fff;
          display: flex;
          gap: 7px;
          margin-bottom: 1.25rem;
          font-family: var(--latest-posts-v1-title-font);
          align-items: center;
          letter-spacing: 2px;
          font-size: 0.7rem;

          & .point {
            width: 5px;
            height: 5px;
            background: #fff;
            border-radius: 100%;
            margin: 0 6px;
          }

          & .QuickRead {
            display: flex;
            align-items: center;
            gap: 5px;

            & svg {
              fill: #fff;
            }

            &:hover svg {
              transform: translateX(10px);
            }
          }
        }

        & .card-title {
          font-family: var(--latest-posts-v1-title-font);
          font-size: clamp(2rem, 3.5vw, var(--latest-posts-v1-title-size));
          font-weight: var(--latest-posts-v1-title-wight);
          margin-bottom: 1.5rem;
          max-width: 48rem;
          line-height: var(--latest-posts-v1-title-line_height);
          letter-spacing: var(--latest-posts-v1-title-letter_spacing);
          margin-top: 0;
          text-transform: var(--latest-posts-v1-title-text_transform);
        }

        & .card-excerpt {
          font-family: var(--latest-posts-v1-title-font);
          color: white;
          font-size: clamp(12px, 3.5vw, var(--latest-posts-v1-desc-size));
          max-width: 42rem;
          line-height: var(--latest-posts-v1-desc-line_height);
          letter-spacing: var(--latest-posts-v1-desc-letter_spacing);
          font-weight: var(--latest-posts-v1-desc-wight);
          text-transform: var(--latest-posts-v1-desc-text_transform);
          overflow: hidden;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
      }
    }
  }
}

@media (min-width: 768px) {
  #cinematic-section {
    /* padding-left: 2.5rem;
    padding-right: 2.5rem; */

    & .card-overlay {
      padding: 3rem !important;

      & .card-title {
        font-size: 3rem;
      }
    }
  }
}

@media (min-width: 640px) {
  #cinematic-section {
    & .page-numbers {
      display: flex;
    }
  }
}