.fm-about { --fm-about-line: rgba(33, 33, 38, .16); --fm-about-icon: var(--fm-c-ink); }

.fm-about > .fm-about__bg { position: absolute; inset: 0; z-index: 0; display: block; pointer-events: none; }
.fm-about > .fm-about__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 78% 40%; }
.fm-about > .fm-container { position: relative; z-index: 1; }

.fm-about .fm-about__item[role="tabpanel"] { visibility: visible; height: auto; max-height: none; overflow: visible; opacity: 1; transition: none; }

.fm-about__list { display: grid; grid-template-columns: minmax(0, 1fr); }
.fm-about__item { padding: 32px 0 40px; border-top: 1px solid var(--fm-about-line); }
.fm-about__item:last-child { border-bottom: 1px solid var(--fm-about-line); }
.fm-about__fig { width: 64px; margin-bottom: 24px; color: var(--fm-about-icon); }
.fm-about__fig svg { display: block; width: 100%; height: auto; overflow: visible; }
.fm-about__num { margin: 0 0 12px; font: 500 13px/round(1.4em, 1px) var(--fm-font-en); letter-spacing: .12em; color: var(--fm-bronze); } 
.fm-about__title { font-size: var(--fm-fs-h3); font-weight: 500; line-height: round(1.6em, 1px); color: var(--fm-text); }
.fm-about__text { max-width: var(--fm-measure); margin-top: 12px; }

@media (min-width: 768px) {
  .fm-about__item { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 40px; align-items: start; padding: 40px 0 48px; }
  .fm-about__fig { margin-bottom: 0; }
  .fm-about__text { margin-top: 16px; }
}

.fm-about .fm-about__dot {
  appearance: none; -webkit-appearance: none; display: inline-grid; place-items: center;
  width: 48px; height: 48px; margin: 0; padding: 0;
  border: 1px solid var(--fm-about-line); border-radius: 50%; background: transparent;
  font: 400 15px/1 var(--fm-font-en); color: var(--fm-text); cursor: pointer;
  transition: color .3s ease-in-out, background-color .3s ease-in-out, border-color .3s ease-in-out; 
}
.fm-about .fm-about__dot[aria-selected="true"] { border-color: var(--fm-c-ink); background: var(--fm-c-ink); color: #FFF; cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .fm-about .fm-about__dot[aria-selected="false"]:hover { border-color: var(--fm-c-ink); }
}


.fm-about.is-tabs .fm-about__wrap {
  position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 80px; align-items: center;
}
.fm-about.is-tabs .fm-about__wrap::after { content: ""; grid-column: 2; grid-row: 1; aspect-ratio: 1 / 1; } 
.fm-about.is-tabs .fm-about__side { grid-column: 1; grid-row: 1; }
.fm-about.is-tabs .fm-about__head { margin-bottom: 48px; }
.fm-about.is-tabs .fm-about__head .fm-head__title { font-size: var(--fm-fs-h2); } 
.fm-about.is-tabs .fm-about__dots { display: flex; gap: 12px; margin-bottom: 40px; }
.fm-about.is-tabs .fm-about__list { display: block; }

.fm-about.is-tabs .fm-about__list { transform: none !important; }
.fm-about.is-tabs .fm-about__item { display: block; padding: 0; border: 0; }
.fm-about.is-tabs .fm-about__item:focus-visible { outline-offset: 8px; }
.fm-about.is-tabs .fm-about__fig {
  position: absolute; top: 50%; right: 0; transform: translateY(-50%);
  display: grid; place-items: center; width: calc((100% - 80px) * 6 / 11); aspect-ratio: 1 / 1; margin: 0;
  border: 1px solid var(--fm-about-line); border-radius: 50%;
}
.fm-about.is-tabs .fm-about__fig svg { width: 30%; }
.fm-about.is-tabs .fm-about__text { margin-top: 16px; }
.fm-about.is-tabs .fm-about__item.is-in { animation: fm-about-in var(--fm-t-fade, .6s) ease-in-out both; }

@keyframes fm-about-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .fm-about .fm-about__item.is-in { animation: none; }
  .fm-about .fm-about__dot { transition: none; }
}

@media print {
  .fm-about .fm-about__dots { display: none !important; }
  .fm-root .fm-about__item[hidden] { display: block !important; }
  .fm-about__bg { display: none; }
}