.services {
  opacity: 0;
  .container {
    display: grid;
    gap: 40px;
    grid-template-columns: repeat(2, 1fr);
    @media (max-width: 1280px) {
      gap: 30px;
    }
    @media (max-width: 1024px) {
      gap: 20px;
    }
    @media (max-width: 768px) {
      grid-template-columns: 1fr;
    }
    article {
      padding: 10px 10px 26px;
      background-color: var(--c-white);
      border: 1px solid var(--c-gray-200);
      box-shadow: 0px 30px 60px -20px rgba(80, 66, 90, 0.06);
      border-radius: var(--br-lg);
      transition: box-shadow 0.3s ease, transform 0.3s ease;
      @media (max-width: 768px) {
        padding: 10px 10px 20px;
      }
      &:hover {
        transform: translateY(-4px);
        box-shadow: 0px 30px 60px -20px rgba(80, 66, 90, 0.24);
      }
      figure {
        margin-bottom: 16px;
        @media (max-width: 768px) {
          margin-bottom: 12px;
        }
        a {
          display: block;
          border-radius: var(--br-sm);
          overflow: hidden;
          img {
            width: 100%;
          }
        }
      }
      h4 {
        margin: 0;
        text-align: center;
      }
    }
  }
}