section.content-section {
  max-width: 1203px; /*! padding: 6.9vw; */
  margin: 0 auto;
  padding-left: 2rem;
  padding-right: 2rem;
  margin-block: 6.5vw;
}

body > section.business-publish-hero {
  background-image: url("../images/business-publish-crop.webp");
}

/* ------------------- Start of 数字媒体基金 Digital Media Fund ------------------- */
/* 数字媒体基金 Digital Media Fund */
.card-container {
  display: flex;
  gap: 1.2rem;
}

section.content-section:nth-child(8) {
  position: relative;
  display: flex;
  gap: 2rem;
}

.background-images {
  position: absolute;
  z-index: -1;
  left: -4rem;
  top: 16rem;
}

.background-images > img:nth-child(1) {
  width: 34%;
  z-index: -1;
  transform: rotateY(180deg);
}

.card-item {
  padding: 1.2rem;
  padding-block: 2.5rem;
  border-radius: 1.38vw;
  width: 33.3%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.3s ease;
  background-color: white;
}

/* Optional: Add hover effect */
.card-item:hover {
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.08);
}

.number {
  font-size: 90px;
  -webkit-text-stroke: 2px orange;
  color: transparent;
}

div.card-container:nth-child(1) > div > h3:nth-child(2) {
  font-weight: 600;
}

/* Get Started Button */
div.card-item > button:nth-child(4) {
  border: none;
  width: 50%;
}

div.card-item > p:nth-child(3) {
  color: rgba(0, 0, 0, 0.7);
}
/* -------------------- End of 数字媒体基金 Digital Media Fund -------------------- */

/* ---------------- Start of 融资和发行 Financing and Distribution --------------- */
/* 融资和发行 Financing and Distribution */
section.content-section:nth-child(9) {
  display: flex;
  gap: 2.2rem;
}

.content-section-img {
  width: 50%;
}

div.content-section-text:nth-child(2) {
  width: 50%;
}

.content-section-img > img:nth-child(1) {
  width: 100%;
  object-fit: cover;
}

div.card-container:nth-child(3) {
  flex-direction: column;
}

div.card-container:nth-child(3) > div {
  width: 100%;
}

div.card-container:nth-child(3) > div > h3:nth-child(1) {
  font-size: 20px;
}

.get-started-btn {
  display: flex;
  align-items: center;
  width: 23%;
  border: none;
  background-color: transparent;
  cursor: pointer; /*! float: right; */
  justify-self: flex-end;
  align-self: flex-end;
}

.button-text {
  width: 70%;
}

.button-icon {
  width: 30%;
  padding: 0.5rem;
  border: 1px solid black;
  border-radius: 100%; /*! transform: rotate(-30deg); */
  width: 37px;
  height: 37px;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* ----------------- End of 融资和发行 Financing and Distribution ---------------- */

/* -------------------------------- Start of 360° IP开发 ------------------------------- */
/* 360° IP开发 360° IP Development */
.card-grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 2rem;
}

.card-item.md {
  width: 100%;
  display: block;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  color: white;
  padding: 2.5rem;
  display: flex;
  justify-content: flex-start;
  gap: 2rem;
}

.get-started-btn {
  gap: 1rem;
}

/* 360° IP开发 */
div.md:nth-child(1) {
  background-image: none;
  color: black;
  box-shadow: none;
  transition: none;
  background-color: transparent;
}

/* CGGE将帮助... */
div.md:nth-child(1) > p:nth-child(2) {
  line-height: 2;
  font-size: 1.2rem;
}

div.md:nth-child(1) > h2:nth-child(1) {
  font-size: 4rem;
}

/* 战略规划与概念设计 */
div.md:nth-child(2) {
  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
    url("../images/business_publish/design.webp");
}

/* 内容开发与制作 */
div.md:nth-child(3) {
  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
    url("../images/business_publish/story.webp");
}

/* 版权运营与商业化 */
div.md:nth-child(4) {
  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
    url("../images/business_publish/social.webp");
}

/* 沉浸式体验与技术应用 */
div.md:nth-child(5) {
  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
    url("../images/business_publish/vr.webp");
}

/* 数据驱动与持续优化 */
div.md:nth-child(6) {
  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
    url("../images/business_publish/data.webp");
}

.card-item.md h3 {
  max-width: 30%;
}

.card-item.md ul {
  margin-left: 4rem;
  margin-bottom: 0px;
}

.content-section-img {
  display: flex;
  justify-content: center;
  align-items: center;
}

section.content-section:nth-child(8) > div:nth-child(2) {
  width: 50%;
}

div.md:nth-child(1) {
  padding: 0;
}
/* ---------------------------- End of 360° IP开发 ---------------------------- */

@media (width <= 855px) {
  section.content-section:nth-child(8) > div:nth-child(2) {
    width: 100%;
  }

  div.card-container:nth-child(1) {
    flex-direction: column;
  }

  .card-item {
    width: 100%;
  }

  .button-text {
    width: 25%;
  }

  .get-started-btn {
    justify-content: flex-end;
  }

  section.content-section:nth-child(9) {
    flex-direction: column;
  }

  .content-section-img {
    align-self: center;
  }

  section.content-section:nth-child(9) > div:nth-child(2) {
    width: 100%;
  }

  div.card-container:nth-child(3) > button:nth-child(4) > div:nth-child(1) {
    width: auto;
  }

  .card-grid-container {
    display: flex;
    flex-direction: column;
  }
}

@media (width <= 1000px) {
  section.content-section:nth-child(9) {
    flex-direction: column;
    align-items: center;
  }

  section.content-section:nth-child(9) > div:nth-child(2) {
    width: 100%;
  }

  div.card-container:nth-child(3) > button:nth-child(4) {
    justify-content: flex-end;
  }
}

@media (width <= 1204px) {
  div.md > h3:nth-child(1) {
    max-width: none;
  }

  .card-item.md {
    display: flex;
  }
}

.card-item.md p {
  opacity: 0.7;
}


body > section.business-publish-hero > div {
  display: flex;
  justify-content: flex-end;
}

@media (width <= 1265px) {
  /* change the hero img to its mobile ver */
  body > section.business-publish-hero {
    background-image: url("../images/business-publish-mobile.webp");
  }

  body > section.hero-controls > div > div > div:nth-child(1),
  body > section.hero-controls > div > div > div:nth-child(2) {
    position: static;
  }
}

@media (width <= 875px) {
  body > section:nth-child(7) > div.content-section-text {
    width: 100%;
  }
}

@media (width <= 855px) {
  body > section:nth-child(8) {
    flex-direction: column;
  }
}