@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@400;600;700&display=swap');

.gi-image-text-grid {
  --gi-grid-color: #264081;
  --gi-desktop-col-gap: 30px;
  --gi-desktop-row-gap: 28px;
  --gi-mobile-gap: 24px;
  --gi-col-1-width: 304px;
  --gi-col-2-width: 304px;
  --gi-top-row-height: 304px;
  --gi-bottom-row-height: 304px;
  --gi-hover-scale: 1.05;
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
}

.gi-image-text-grid,
.gi-image-text-grid * {
  box-sizing: border-box;
  font-family: "Noto Serif TC", "PingFang TC", "Microsoft JhengHei", serif;
}

.gi-image-text-grid__desktop-layout {
  display: block;
}

.gi-image-text-grid__mobile-layout {
  display: none;
}

.gi-image-text-grid__titles,
.gi-image-text-grid__matrix {
  display: grid;
  grid-template-columns: var(--gi-col-1-width) var(--gi-col-2-width);
  column-gap: var(--gi-desktop-col-gap);
  justify-content: center;
}

.gi-image-text-grid__title-slot {
  min-width: 0;
  display: flex;
}

.gi-image-text-grid__titles--top .gi-image-text-grid__title-slot {
  align-items: flex-end;
  padding-bottom: var(--gi-content-gap);
}

.gi-image-text-grid__titles--bottom .gi-image-text-grid__title-slot {
  align-items: flex-start;
  padding-top: var(--gi-content-gap);
}

.gi-image-text-grid__title-slot--left {
  justify-content: flex-end;
}

.gi-image-text-grid__title-slot--right {
  justify-content: flex-start;
}

.gi-image-text-grid__title-wrap {
  width: var(--gi-frame-width);
  max-width: 100%;
  text-align: center;
  color: var(--gi-grid-color);
  transform: translate(var(--gi-offset-x), var(--gi-offset-y));
}

.gi-image-text-grid__title {
  margin: 0;
  color: inherit;
  font-size: var(--gi-title-size);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .01em;
}

.gi-image-text-grid__subtitle {
  margin-top: 6px;
  color: inherit;
  font-size: var(--gi-subtitle-size);
  line-height: 1.45;
  opacity: .9;
}

.gi-image-text-grid__line {
  width: min(102px, 44%);
  height: 1px;
  margin: 6px auto 0;
  background: currentColor;
  opacity: .65;
}

.gi-image-text-grid__matrix {
  grid-template-rows: var(--gi-top-row-height) var(--gi-bottom-row-height);
  row-gap: var(--gi-desktop-row-gap);
}

.gi-image-text-grid__cell {
  min-width: 0;
  display: flex;
  overflow: visible;
}

.gi-image-text-grid__cell--left {
  justify-content: flex-end;
}

.gi-image-text-grid__cell--right {
  justify-content: flex-start;
}

.gi-image-text-grid__cell--top {
  align-items: flex-end;
}

.gi-image-text-grid__cell--bottom {
  align-items: flex-start;
}

.gi-image-text-grid__frame-position {
  width: var(--gi-frame-width);
  height: var(--gi-frame-height);
  transform: translate(var(--gi-offset-x), var(--gi-offset-y)) scale(1);
  transform-origin: center center;
  transition: transform .35s ease, z-index .35s ease;
  position: relative;
  z-index: 1;
  overflow: visible;
  will-change: transform;
}

.gi-image-text-grid__link,
.gi-image-text-grid__frame {
  display: block;
  width: 100%;
  height: 100%;
}

.gi-image-text-grid__frame {
  overflow: hidden;
  background: transparent;
}

.gi-image-text-grid__frame img,
.gi-image-text-grid__mobile-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.gi-image-text-grid.is-hover-zoom .gi-image-text-grid__link:hover + .nothing { }

.gi-image-text-grid.is-hover-zoom .gi-image-text-grid__frame-position:hover,
.gi-image-text-grid.is-hover-zoom .gi-image-text-grid__link:hover .gi-image-text-grid__frame,
.gi-image-text-grid.is-hover-zoom .gi-image-text-grid__link:hover .gi-image-text-grid__frame-position {
  z-index: 5;
}

.gi-image-text-grid.is-hover-zoom .gi-image-text-grid__frame-position:hover,
.gi-image-text-grid.is-hover-zoom .gi-image-text-grid__link:hover .gi-image-text-grid__frame-position {
  transform: translate(var(--gi-offset-x), var(--gi-offset-y)) scale(var(--gi-hover-scale));
}

@media (max-width: 680px) {
  .gi-image-text-grid {
    width: 100%;
    max-width: 100%;
  }

  .gi-image-text-grid__desktop-layout {
    display: none;
  }

  .gi-image-text-grid__mobile-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gi-mobile-gap);
  }

  .gi-image-text-grid__mobile-card {
    width: min(var(--gi-mobile-frame-width), 100%);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--gi-mobile-content-gap);
    overflow: visible;
  }

  .gi-image-text-grid__mobile-title-wrap {
    text-align: center;
    color: var(--gi-grid-color);
  }

  .gi-image-text-grid__mobile-title {
    margin: 0;
    color: inherit;
    font-size: var(--gi-mobile-title-size);
    font-weight: 700;
    line-height: 1.25;
  }

  .gi-image-text-grid__mobile-subtitle {
    margin-top: 6px;
    color: inherit;
    font-size: var(--gi-mobile-subtitle-size);
    line-height: 1.45;
    opacity: .9;
  }

  .gi-image-text-grid__mobile-line {
    width: 84px;
    max-width: 44%;
    height: 1px;
    margin: 6px auto 0;
    background: currentColor;
    opacity: .65;
  }

  .gi-image-text-grid__mobile-frame {
    width: min(var(--gi-mobile-frame-width), 100%);
    aspect-ratio: var(--gi-mobile-frame-width-num) / var(--gi-mobile-frame-height-num);
    overflow: hidden;
    transform: scale(1);
    transform-origin: center center;
    transition: transform .35s ease, z-index .35s ease;
    position: relative;
    z-index: 1;
    will-change: transform;
  }

  .gi-image-text-grid.is-hover-zoom .gi-image-text-grid__mobile-frame:hover,
  .gi-image-text-grid.is-hover-zoom .gi-image-text-grid__link:hover .gi-image-text-grid__mobile-frame {
    transform: scale(var(--gi-hover-scale));
    z-index: 5;
  }
}