.customer-stories-container {
  max-width: 1230px;
  padding: 0 15px;
  margin: 0 auto;

  .pricing-package_title_wrap {
    padding: 0;
    text-align: center;

    .pricing-package_title {
      max-width: 400px;
      margin: 0 auto;

      @media (max-width: 1024px) {
        max-width: 410px;
      }
    }
  }
}

.customer-stories-items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;

  @media (max-width: 1024px) {
    grid-template-columns: repeat(2, 1fr);
  }

  @media (max-width: 768px) {
    grid-template-columns: 1fr;
  }
}

.customer-stories-item {
  display: block;
  border-radius: 5px 5px 0 0;

  &:hover {
    .customer-stories-figure {
      img {
        transform: scale(1.1);
      }

      &::after {
        opacity: 0;
      }
    }

    .customer-stories-logo {
      border: none;
      border-radius: none;
      box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    }
  }
}

.customer-stories-figure {
  position: relative;
  border-radius: 5px 5px 0 0;
  overflow: hidden;

  img {
    width: 100%;
    transition: all 0.3s ease;
  }

  &::after {
    content: '';
    position: absolute;
    inset: 0;
    transition: opacity 0.3s ease, background-color 0.3s ease;
    background-color: #fff;
    opacity: 0.25;
  }
}

.customer-stories-logo {
  display: block;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 74px;
  padding: 10px;
  border: 1px solid #181818;
  transition: box-shadow 0.3s ease;
  border-radius: 0 0 5px 5px;

  svg {
    width: 100%;
    max-width: 246px;
  }
}

.customer-stories-figure::after {
  opacity: var(--after-opacity, 0.25);
}