.c-card-102 {
  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-102--reserve {
    flex-direction: row-reverse;

    @media (max-width: 768px) {
      flex-direction: column;
    }
  }
}

.c-card-102__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;

    img {
      height: auto;
      border-radius: 0;
    }
  }
  .c-card-102--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-102__content {
  margin-top: var(--wp--preset--spacing--2-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-102__title {
  font-weight: var(--wp--custom--font-weight--bold);
  color: var(--wp--preset--color--basic-text);

  margin-top: 0;

  font-size: var(--wp--preset--font-size--2-xl);
}
.c-card-102__title-en {
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--primary);
  text-align: center;
  margin-bottom: var(--wp--preset--spacing--sm);
}
.c-card-102__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-102__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);
}
