.use-case-con {
  position: relative;
  padding-bottom: 32px;
  margin-bottom: 32px;
}
.use-case-con:before, .use-case-con:after {
  content: "";
  display: block;
  position: absolute;
  top: 100%;
  width: 100%;
  height: 30px;
}
.use-case-con:before {
  background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(213, 213, 213, 0.2) 100%);
}
.use-case-con:after {
  background: linear-gradient(90deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 50%, rgb(255, 255, 255) 100%);
}

.usecase-con {
  margin-bottom: 2rem;
}
.usecase-con:nth-child(3n+1) .title-con {
  background-color: #339999;
}
.usecase-con:nth-child(3n+2) .title-con {
  background-color: #00cc33;
}
.usecase-con:nth-child(3n+3) .title-con {
  background-color: #ff6666;
}
@media (min-width: 768px) {
  .usecase-con:nth-child(2n+2) .title-con {
    flex-flow: row-reverse wrap;
  }
}
.usecase-con h1:first-child,
.usecase-con h2:first-child,
.usecase-con h3:first-child,
.usecase-con h4:first-child,
.usecase-con h5:first-child,
.usecase-con h6:first-child,
.usecase-con p:first-child,
.usecase-con ul:first-child,
.usecase-con ol:first-child {
  margin-bottom: 0;
}
.usecase-con h1:not(:first-child),
.usecase-con h2:not(:first-child),
.usecase-con h3:not(:first-child),
.usecase-con h4:not(:first-child),
.usecase-con h5:not(:first-child),
.usecase-con h6:not(:first-child),
.usecase-con p:not(:first-child),
.usecase-con ul:not(:first-child),
.usecase-con ol:not(:first-child) {
  margin-top: 0;
}
.usecase-con .title-con {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}
.usecase-con .title-image {
  position: relative;
  overflow: hidden;
}
.usecase-con .title-image h1,
.usecase-con .title-image h2,
.usecase-con .title-image h3,
.usecase-con .title-image h4,
.usecase-con .title-image h5,
.usecase-con .title-image h6,
.usecase-con .title-image p {
  padding: 0;
  margin: 0;
  line-height: 0;
}
.usecase-con .title-image img {
  max-width: unset;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media (min-width: 768px) {
  .usecase-con .title-image {
    flex: 0 0 290px;
  }
}
.usecase-con .title-content {
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  padding: 2rem;
}
.usecase-con .title-content h1,
.usecase-con .title-content h2,
.usecase-con .title-content h3,
.usecase-con .title-content h4,
.usecase-con .title-content h5,
.usecase-con .title-content h6,
.usecase-con .title-content p {
  color: #fff;
}
@media (min-width: 768px) {
  .usecase-con .title-content {
    flex: 0 0 870px;
  }
}
.usecase-con .intro {
  max-width: 980px;
  padding: 2rem;
  margin: 0 auto;
}
.usecase-con .detail-split-con {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  margin: 0 2rem;
}
@media (min-width: 768px) {
  .usecase-con .detail-split-con {
    justify-content: space-between;
  }
}
@media (min-width: 1280px) {
  .usecase-con .detail-split-con {
    max-width: 1160px;
    margin: 0 auto;
  }
}
.usecase-con .detail-split-content {
  flex: 0 0 calc(100% - 2rem);
  background-color: #ebeff2;
  padding: 1rem 2rem 2rem;
  border-radius: 0.75rem;
}
@media (min-width: 768px) {
  .usecase-con .detail-split-content {
    flex: 0 0 calc(50% - 2rem);
  }
}
.usecase-con .detail-split-content ul,
.usecase-con .detail-split-content ol {
  padding-left: 0.75rem;
  margin-left: -0.5rem;
}
.usecase-con .feature-iconsonly-con {
  text-align: center;
  padding: 16px 16px 0;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .usecase-con .feature-iconsonly-con {
    padding: 32px 32px 0;
  }
}
@media (min-width: 1024px) {
  .usecase-con .feature-iconsonly-con {
    padding: 32px 32px 0;
  }
}