.fc_stats {
  .stat_container {
    display: flex;
    flex-direction: column;

    .stat {
      padding: var(--padding-s) 0;
      border-bottom: 1px solid var(--color-white);
      display: flex;
      gap: var(--gap-xxs);
      flex-direction: column;
      align-items: center;
      text-align: center;

      .number_container {
        display: flex;

        .title {
          font-size: clamp(43px, 3.186vw + 24.647px, 82px);
        }
      }

      .title {
        text-transform: initial;
      }

      &:first-of-type {
        margin-top: 0;
      }
    }
  }

  /* line colour */
  &.line_blue {
    .stat_container {
      .stat {
        border-bottom: 1px solid var(--color-blue);
      }
    }
  }

  &.line_green {
    .stat_container {
      .stat {
        border-bottom: 1px solid var(--color-green);
      }
    }
  }

  &.line_pink {
    .stat_container {
      .stat {
        border-bottom: 1px solid var(--color-pink);
      }
    }
  }

  /* responsive */
  @media (width >= 576px) {
    .stat_container {
      .stat {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
      }
    }
  }

  @media (width >= 768px) {
    .stat_container {
      .stat {
        .content_container {
          position: relative;
          isolation: isolate;
          display: flex;
          flex-direction: row;
          align-items: center;
          padding: 0 0 0 clamp(120px, 10.853vw + 36.651px, 232px);

          .title {
            white-space: nowrap;
          }

          .image {
            position: absolute;
            width: clamp(104px, 9.302vw + 32.558px, 200px);
            aspect-ratio: 1;
            border-radius: var(--border-radius-m);
            top: 50%;
            left: 0;
            transform: translateY(-40%) rotate(-6.995deg);
          }
        }

        &:nth-child(even) {
          .content_container {
            flex-direction: row-reverse;
            padding: 0 clamp(120px, 10.853vw + 36.651px, 232px) 0 0;

            .image {
              left: unset;
              right: 0;
              transform: translateY(-40%) rotate(8.891deg);
            }
          }
        }
      }
    }
  }
}
