.formatto-history {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 19.625rem 20rem 8rem;
  background: var(--color-background);
}

.formatto-history__gallery {
  display: flex;
  flex: 0 0 40.875rem;
  width: 40.875rem;
  height: 25.0228125rem;
  overflow: hidden;
  border-radius: 1.0480625rem;
  background: #c9cdcf;
}

.formatto-history__portrait {
  position: relative;
  flex-grow: 1;
  height: 100%;
  overflow: hidden;
  transition: flex-grow 600ms ease, flex-basis 600ms ease, width 600ms ease;
}

.formatto-history__portrait:first-child,
.formatto-history__portrait:nth-child(3) {
  flex: 0 0 13.6905rem;
  width: 13.6905rem;
}

.formatto-history__portrait:nth-child(2) {
  flex: 0 0 13.5595rem;
  width: 13.5595rem;
}

.formatto-history__portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.formatto-history__portrait::after {
  position: absolute;
  inset: auto 0 0;
  height: 45%;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 47, 76, 0) 0%, rgba(0, 47, 76, 0.72) 100%);
  content: "";
  opacity: 0;
  transition: opacity 220ms ease;
}

.formatto-history__portrait-name {
  position: absolute;
  right: 1.25rem;
  bottom: 1.25rem;
  left: 1.25rem;
  z-index: 1;
  margin: 0;
  color: var(--color-blue-50);
  font-family: var(--font-body);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015rem;
  text-box-edge: cap alphabetic;
  opacity: 0;
  transform: translateY(0.75rem);
  transition: opacity 220ms ease, transform 220ms ease;
}

.formatto-history__portrait:hover {
  flex-grow: 1.08;
}

.formatto-history__portrait:hover::after,
.formatto-history__portrait:hover .formatto-history__portrait-name {
  opacity: 1;
}

.formatto-history__portrait:hover .formatto-history__portrait-name {
  transform: translateY(0);
}

.formatto-history__content {
  display: flex;
  flex: 0 0 35.64rem;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 3.5rem;
  width: 35.64rem;
}

.formatto-history__text {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  width: 100%;
  word-break: break-word;
}

.formatto-history__heading {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
  line-height: 1.2;
}

.formatto-history__eyebrow,
.formatto-history h2,
.formatto-history__description,
.formatto-history__note,
.formatto-history__link {
  margin: 0;
  font-family: var(--font-body);
}

.formatto-history__eyebrow {
  width: 100%;
  color: #00588a;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.01rem;
}

.formatto-history h2 {
  width: 100%;
  color: var(--color-blue-600);
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.025rem;
}

.formatto-history__description {
  width: 37.125rem;
  color: #002f4c;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.01125rem;
}

.formatto-history__note {
  width: 27.5625rem;
  color: #00588a;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.01rem;
}

.formatto-history__link {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  height: 0.8125rem;
  color: var(--color-blue-600);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01rem;
  white-space: nowrap;
}

.formatto-history__link img {
  width: 0.63825rem;
  height: 0.6613125rem;
}

@media (min-width: 1367px) and (max-width: 1919px) {
  .formatto-history {
    padding: 16.354vw 16.667vw 6.667vw;
  }
}

@media (max-width: 1919px) {
  .formatto-history {
    padding: 16.354vw 16.667vw 6.667vw;
  }

  .formatto-history__gallery {
    flex-basis: 34.063vw;
    width: 34.063vw;
    height: 20.852vw;
    border-radius: 0.873vw;
  }

  .formatto-history__portrait:first-child,
  .formatto-history__portrait:nth-child(3) {
    flex-basis: 11.409vw;
    width: 11.409vw;
  }

  .formatto-history__portrait:nth-child(2) {
    flex-basis: 11.3vw;
    width: 11.3vw;
  }

  .formatto-history__portrait-name {
    right: 1.042vw;
    bottom: 1.042vw;
    left: 1.042vw;
    font-size: 1.25vw;
    letter-spacing: -0.013vw;
    transform: translateY(0.625vw);
  }

  .formatto-history__content {
    flex-basis: 29.7vw;
    gap: 2.917vw;
    width: 29.7vw;
  }

  .formatto-history__text {
    gap: 2.083vw;
  }

  .formatto-history__heading {
    gap: 1.25vw;
  }

  .formatto-history__eyebrow {
    font-size: 0.833vw;
    letter-spacing: -0.008vw;
  }

  .formatto-history h2 {
    font-size: 2.083vw;
    letter-spacing: -0.021vw;
  }

  .formatto-history__description {
    width: 30.938vw;
    font-size: 0.938vw;
    letter-spacing: -0.009vw;
  }

  .formatto-history__note {
    width: 22.969vw;
    font-size: 0.833vw;
    letter-spacing: -0.008vw;
  }

  .formatto-history__link {
    gap: 0.521vw;
    height: 0.677vw;
    font-size: 0.833vw;
    letter-spacing: -0.008vw;
  }

  .formatto-history__link img {
    width: 0.532vw;
    height: 0.551vw;
  }
}

@media (min-width: 1367px) and (max-width: 1919px) {
  .formatto-history {
    padding-inline: 12vw;
  }

  .formatto-history__content {
    flex-basis: 36vw;
    width: 36vw;
  }

  .formatto-history__eyebrow,
  .formatto-history__description,
  .formatto-history__note,
  .formatto-history__link {
    font-size: clamp(16px, 0.938vw, 18px);
  }

  .formatto-history h2 {
    font-size: clamp(24px, 2.083vw, 40px);
  }

  .formatto-history__description {
    width: 36vw;
  }

  .formatto-history__note {
    width: 30vw;
  }
}

@media (max-width: 1366px) {
  .formatto-history__gallery {
    flex-basis: clamp(430px, 34.063vw, 654px);
    width: clamp(430px, 34.063vw, 654px);
    height: clamp(263px, 20.852vw, 400px);
  }

  .formatto-history__portrait:first-child,
  .formatto-history__portrait:nth-child(3) {
    flex-basis: clamp(144px, 11.409vw, 219px);
    width: clamp(144px, 11.409vw, 219px);
  }

  .formatto-history__portrait:nth-child(2) {
    flex-basis: clamp(143px, 11.3vw, 217px);
    width: clamp(143px, 11.3vw, 217px);
  }

  .formatto-history__portrait-name {
    font-size: clamp(18px, 1.25vw, 24px);
  }

  .formatto-history__eyebrow,
  .formatto-history__note,
  .formatto-history__link {
    font-size: clamp(14px, 0.833vw, 16px);
  }

  .formatto-history h2 {
    font-size: clamp(20px, 2.083vw, 40px);
  }

  .formatto-history__description {
    font-size: clamp(14px, 0.938vw, 18px);
  }

  .formatto-history__link img {
    width: clamp(8px, 0.532vw, 10px);
    height: clamp(8px, 0.551vw, 11px);
  }
}

@media (max-width: 1024px) {
  .formatto-history {
    padding-inline: 5vw;
  }

  .formatto-history__content {
    flex-basis: 37.125vw;
    gap: 2.917vw;
    width: 37.125vw;
  }

  .formatto-history__eyebrow {
    font-size: clamp(14px, 0.833vw, 16px);
  }

  .formatto-history h2 {
    font-size: clamp(22px, 2.083vw, 40px);
  }

  .formatto-history__description {
    font-size: clamp(14px, 0.938vw, 18px);
  }

  .formatto-history__note {
    font-size: clamp(14px, 0.833vw, 16px);
  }

  .formatto-history__link {
    font-size: clamp(14px, 0.833vw, 16px);
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .formatto-history {
    min-height: 51.437vw;
    padding: 20.031vw 11.719vw 6.667vw;
  }

  .formatto-history__gallery {
    flex-basis: 40.234vw;
    width: 40.234vw;
    height: 24.631vw;
    border-radius: 1.023vw;
  }

  .formatto-history__portrait:first-child,
  .formatto-history__portrait:nth-child(3) {
    flex-basis: 13.476vw;
    width: 13.476vw;
  }

  .formatto-history__portrait:nth-child(2) {
    flex-basis: 13.347vw;
    width: 13.347vw;
  }

  .formatto-history__portrait-name {
    right: 1.465vw;
    bottom: 1.465vw;
    left: 1.465vw;
    font-size: 2.344vw;
    letter-spacing: -0.023vw;
  }

  .formatto-history__content {
    flex-basis: 30.938vw;
    gap: 3.711vw;
    width: 30.938vw;
  }

  .formatto-history__text {
    gap: 2.734vw;
  }

  .formatto-history__heading {
    gap: 1.934vw;
  }

  .formatto-history__description {
    width: 30.938vw;
  }

  .formatto-history__note {
    width: 27.148vw;
  }
}

@media (max-width: 767px) {
  .formatto-history {
    flex-direction: column;
    gap: 10.43vw;
    padding: 29.335vw 8.344vw 16.688vw;
  }

  .formatto-history__gallery {
    height: 62.581vw;
    border-radius: 3.65vw;
  }

  .formatto-history__portrait-name {
    right: 4.172vw;
    bottom: 4.172vw;
    left: 4.172vw;
    font-size: 5.215vw;
    letter-spacing: -0.052vw;
    opacity: 1;
    transform: none;
  }

  .formatto-history__portrait::after {
    opacity: 1;
  }

  .formatto-history__content {
    gap: 8.344vw;
    width: 100%;
  }

  .formatto-history__text {
    gap: 6.258vw;
  }

  .formatto-history__heading {
    gap: 4.172vw;
  }

  .formatto-history__eyebrow {
    font-size: 3.65vw;
    letter-spacing: -0.037vw;
  }

  .formatto-history h2 {
    font-size: 7.301vw;
    letter-spacing: -0.073vw;
  }

  .formatto-history__description {
    width: 100%;
    font-size: 4.172vw;
    letter-spacing: -0.042vw;
  }

  .formatto-history__note {
    width: 100%;
    font-size: 3.65vw;
    letter-spacing: -0.037vw;
  }

  .formatto-history__link {
    gap: 2.608vw;
    height: 3.39vw;
    font-size: 3.65vw;
    letter-spacing: -0.037vw;
  }

  .formatto-history__link img {
    width: 2.662vw;
    height: 2.758vw;
  }
}

@media (min-width: 1409px) and (max-width: 1919px) {
  .formatto-history {
    padding-right: calc((100vw - 80rem) / 2);
    padding-left: calc((100vw - 80rem) / 2);
  }
}

@media (min-width: 768px) and (max-width: 1408px) {
  .formatto-history {
    padding: 22.285308vw 5vw 9.084457vw;
  }

  .formatto-history__gallery {
    flex-basis: 46.415898vw;
    width: 46.415898vw;
    height: 28.414833vw;
    border-radius: 1.190135vw;
  }

  .formatto-history__portrait {
    flex: 1 1 15.546345vw;
    width: 15.546345vw;
  }

  .formatto-history__portrait:first-child,
  .formatto-history__portrait:nth-child(3) {
    flex: 1 1 15.546345vw;
    width: 15.546345vw;
  }

  .formatto-history__portrait:nth-child(2) {
    flex: 1 1 15.397587vw;
    width: 15.397587vw;
  }

  .formatto-history__portrait-name {
    right: 1.419447vw;
    bottom: 1.419447vw;
    left: 1.419447vw;
    font-size: 1.703335vw;
    letter-spacing: -0.017033vw;
    transform: translateY(0.851668vw);
  }

  .formatto-history__content {
    flex-basis: 40.471256vw;
    gap: 3.97445vw;
    width: 40.471256vw;
  }

  .formatto-history__text {
    gap: 2.838893vw;
  }

  .formatto-history__heading {
    gap: 1.703335vw;
  }

  .formatto-history__eyebrow,
  .formatto-history__note,
  .formatto-history__link {
    font-size: 1.135557vw;
    letter-spacing: -0.011356vw;
  }

  .formatto-history h2 {
    font-size: 2.838893vw;
    letter-spacing: -0.028389vw;
  }

  .formatto-history__description {
    width: 42.157559vw;
    font-size: 1.277502vw;
    letter-spacing: -0.012775vw;
  }

  .formatto-history__note {
    width: 31.298794vw;
  }

  .formatto-history__link {
    gap: 0.709723vw;
    height: 0.92264vw;
  }

  .formatto-history__link img {
    width: 0.724769vw;
    height: 0.750958vw;
  }
}

@media (max-width: 767px) {
  .formatto-history {
    padding-right: 5vw;
    padding-left: 5vw;
  }

  .formatto-history__gallery {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    aspect-ratio: 40.875 / 25.0228125;
  }

  .formatto-history__portrait,
  .formatto-history__portrait:first-child,
  .formatto-history__portrait:nth-child(3) {
    flex: 1 1 33.493%;
    width: 33.493%;
  }

  .formatto-history__portrait:nth-child(2) {
    flex: 1 1 33.173%;
    width: 33.173%;
  }
}

@media (min-width: 1409px) and (max-width: 1919px) {
  .formatto-history__gallery {
    flex-basis: 40.875rem;
    width: 40.875rem;
    height: 25.0228125rem;
    border-radius: 1.0480625rem;
  }

  .formatto-history__portrait {
    flex: 1 1 13.6905rem;
    width: 13.6905rem;
  }

  .formatto-history__portrait:first-child,
  .formatto-history__portrait:nth-child(3) {
    flex: 1 1 13.6905rem;
    width: 13.6905rem;
  }

  .formatto-history__portrait:nth-child(2) {
    flex: 1 1 13.5595rem;
    width: 13.5595rem;
  }

  .formatto-history__portrait-name {
    right: 1.25rem;
    bottom: 1.25rem;
    left: 1.25rem;
    font-size: 1.5rem;
    letter-spacing: -0.015rem;
    transform: translateY(0.75rem);
  }

  .formatto-history__content {
    flex-basis: 35.64rem;
    gap: 3.5rem;
    width: 35.64rem;
  }

  .formatto-history__text {
    gap: 2.5rem;
  }

  .formatto-history__heading {
    gap: 1.5rem;
  }

  .formatto-history__eyebrow,
  .formatto-history__note,
  .formatto-history__link {
    font-size: 1rem;
    letter-spacing: -0.01rem;
  }

  .formatto-history h2 {
    font-size: 2.5rem;
    letter-spacing: -0.025rem;
  }

  .formatto-history__description {
    width: 37.125rem;
    font-size: 1.125rem;
    letter-spacing: -0.01125rem;
  }

  .formatto-history__note {
    width: 27.5625rem;
  }

  .formatto-history__link {
    gap: 0.625rem;
    height: 0.8125rem;
  }

  .formatto-history__link img {
    width: 0.63825rem;
    height: 0.6613125rem;
  }
}

@media (hover: hover) and (pointer: fine) {
  .formatto-history__gallery .formatto-history__portrait {
    flex: 1.00966 1 0;
    width: auto;
  }

  .formatto-history__gallery .formatto-history__portrait:nth-child(2) {
    flex-grow: 1;
  }

  .formatto-history__gallery .formatto-history__portrait:hover {
    flex-grow: 1.16;
  }
}