.c-card-101 {
  border-radius: var(--wp--custom--border-radius--md);

  display: flex;
  height: 100%;
  margin: var(--wp--preset--spacing--6-xl) auto !important;
  @media (max-width: 768px) {
    flex-direction: column;
  }
  &.c-card-101--reserve {
    flex-direction: row-reverse;

    @media (max-width: 768px) {
      flex-direction: column;
    }
  }
}

.c-card-101__image {
  width: 100%;
  height: auto;
  overflow: hidden;
  margin-right: calc(var(--wp--preset--spacing--2-xl) * -1) !important;
  img {
    height: 100%;
    width: 100%;
    display: block;
    object-fit: cover;
    border-radius: var(--wp--custom--border-radius--lg);
  }
  @media (max-width: 768px) {
    width: 100%;
    margin: 0 !important;
    &:after {
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background: rgba(0, 0, 0, 0.4);
    }
    img {
      height: auto;
      border-radius: 0;
    }
  }
  .c-card-101--reserve & {
    margin-right: 0 !important;
    margin-left: calc(var(--wp--preset--spacing--5-xl) * -1) !important;
    @media (max-width: 768px) {
      margin: 0 !important;
    }
  }
}
.c-card-101__content {
  margin-top: var(--wp--preset--spacing--6-xl);
  padding: var(--wp--preset--spacing--lg);
  color: var(--wp--preset--color--basic-text);
  width: 100%;
  background: var(--wp--preset--color--gray-lightest);
  border-radius: var(--wp--custom--border-radius--lg);
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  position: relative;
  @media (max-width: 768px) {
    margin-top: calc(var(--wp--preset--spacing--2-xl) * -1) !important;
    width: calc(100% - var(--wp--preset--spacing--4-xl));
    margin-left: auto;
    margin-right: auto;
  }
}
.c-card-101__icon {
  position: absolute !important;
  top: -8.9rem;
  left: 50%;
  transform: translateX(-50%);
  width: 12rem;
  height: 12rem;
  margin-bottom: var(--wp--preset--spacing--base);
  border-radius: 9999px;
  overflow: hidden;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
}
.c-card-101__title {
  font-weight: var(--wp--custom--font-weight--bold);
  color: var(--wp--preset--color--basic-text);
  text-align: center;
  margin-top: 0;

  font-size: var(--wp--preset--font-size--sm);
}
.c-card-101__title-en {
  font-size: var(--wp--preset--font-size--xl);
  color: var(--wp--preset--color--primary);
  text-align: center;
  margin-bottom: var(--wp--preset--spacing--sm);
}
.c-card-101__sub-title {
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--basic-text);
  text-align: center;
  margin: var(--wp--preset--spacing--base) 0;
  padding: var(--wp--preset--spacing--base) 0;
  position: relative;

  &:before,
  &:after {
    content: "";
    position: absolute !important;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    width: 2.9rem;
    height: 1px;
    background: var(--wp--preset--color--primary);
    z-index: -1;
  }
  &:before {
    top: 0;
  }
  &:after {
    bottom: 0;
  }
}
.c-card-101__text {
  font-size: var(--wp--preset--font-size--sm);
  line-height: 1.8;
  color: var(--wp--preset--color--basic-text);
  padding: var(--wp--preset--spacing--base);
  border-radius: var(--wp--custom--border-radius--md);
  background: var(--wp--preset--color--gray-lightest);
}