antora-ui-camel/src/css/docs.css

.docs,
.community {
  padding: 1rem 3rem 2rem;
  display: flex;
  width: 80%;
  flex-direction: column;
}

.docs .box,
.community .box {
  display: flex;
  margin: 1rem 0;
}

.docs .box .content,
.community .box .content {
  width: 70%;
}

.docs .box img,
.community .box img {
  margin-top: 4rem;
  height: 8vw;
  max-height: 6rem;
  margin-right: 0.5rem;
}

.docs .box .icon {
  width: 30%;
  text-align: center;
}

.docs .box.camel-core .icon,
.community .box .icon {
  width: 20%;
  text-align: center;
}

.icon a,
a.button-light,
a.button-dark {
  background-image: none;
}

.docs .box.camel-core .content {
  width: 80%;
}

@media screen and (max-width: 1024px) {
  .docs,
  .community {
    padding: 0 1rem 4rem;
    width: 100%;
  }

  .docs .box,
  .community .box,
  .docs .box .content,
  .community .box .content,
  .docs .box .icon,
  .community .box .icon,
  .docs .box.camel-core .content,
  .docs .box.camel-core .icon {
    flex-direction: column;
    margin: 0 auto;
    padding: 0;
    text-align: center;
    width: 90%;
  }

  .docs .box img,
  .community .box img {
    height: 6rem;
    max-width: 25vw;
    margin: 2.5rem 0.5rem 0;
  }

  .docs .box.right,
  .community .box.right {
    flex-direction: column-reverse;
  }

  .docs .button-light {
    line-height: 4rem;
  }
}