.our-work {
  margin-bottom: var(--section-spacing);
  opacity: 0;
  .our-work-items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    row-gap: 60px;
    margin-bottom: var(--section-spacing);
    @media (max-width: 1024px) {
      gap: 30px;
      row-gap: 50px;
    }
    @media (max-width: 768px) {
      grid-template-columns: 1fr;
    }
    article {
      figure {
        position: relative;
        z-index: 1;
        a {
          display: block;
          border-radius: var(--br-md);
          overflow: hidden;
          img {
            width: 100%;
          }
        }
      }
      h4 {
        position: absolute;
        left: 30px;
        right: 30px;
        bottom: -30px;
        margin: 0;
        transition: transform 0.3s ease;
        z-index: 2;
        a {
          display: block;
          padding: 18px;
          color: var(--c-white);
          text-align: center;
          background-color: var(--c-gray-600);
          border-radius: var(--br-md);
          transition: background-color 0.3s ease;
        }
      }
      &:hover {
        h4 {
          transform: translateY(-6px);
          a {
            background-color: var(--c-primary-200);
          }
        }
      }
    }
  }
}