/* Product / solution detail pages — Figma mobile + desktop */

.fg-detail {
  --fg-pink: #ce0058;
  --fg-grey: #f4f4f4;
  --fg-text: #2f3038;
}

.fg-detail__hero {
  overflow: hidden;
}

.fg-detail__hero img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fg-detail__hero--commodity {
  height: 304px;
}

.fg-detail__hero--solution {
  height: 237px;
}

.fg-detail__panel {
  background: #fff;
  padding: 32px 13px 40px;
}

.fg-detail__panel h1 {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.35;
  color: #000;
  margin: 0 0 24px;
}

.fg-detail__intro p,
.fg-detail__body p {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: #000;
  margin: 0 0 16px;
}

.fg-detail__intro p:last-child,
.fg-detail__body p:last-child {
  margin-bottom: 0;
}

.fg-detail__inline-image {
  margin-top: 24px;
  border-radius: 8px;
  overflow: hidden;
}

.fg-detail__inline-image img {
  display: block;
  width: 100%;
  height: auto;
}

.fg-detail__body {
  background: var(--fg-grey);
  padding: 32px 13px 48px;
}

.fg-detail__body p + p {
  margin-top: 16px;
}

/* Desktop */
@media (min-width: 992px) {
  .fg-detail__hero--desktop {
    height: 420px;
  }

  .fg-detail__desktop-wrap {
    padding: 64px 0 80px;
    background: var(--fg-grey);
  }

  .fg-detail__desktop-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
    gap: 48px;
    align-items: start;
  }

  .fg-detail__desktop-main {
    background: #fff;
    border-radius: 18px;
    padding: 48px 56px;
  }

  .fg-detail__desktop-main h1 {
    font-size: 2rem;
    margin-bottom: 32px;
  }

  .fg-detail__desktop-main p {
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 20px;
  }

  .fg-detail__desktop-main p:last-child {
    margin-bottom: 0;
  }

  .fg-detail__desktop-media {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .fg-detail__desktop-media img {
    display: block;
    width: 100%;
    border-radius: 12px;
    object-fit: cover;
  }

  .fg-detail__desktop-media img:first-child {
    height: 260px;
  }

  .fg-detail__desktop-media img:last-child {
    height: 320px;
  }
}