@layer components {
  .about {
    background-color: oklch(0.97 0.005 270);
    padding-block: 14cqi;
  }

  /* Title */
  .about__title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3cqi;
    margin-block-end: 8cqi;
    padding-inline: 2cqi;
  }

  .about__title-sub {
    display: inline-flex;
    min-inline-size: max-content;
    align-items: center;
    justify-content: center;
    background-color: oklch(0.45 0.22 265);
    border-radius: var(--radius-full);
    padding-block: 1.25cqi;
    padding-inline: 3cqi;
    font-family: var(--font-hero);
    font-size: 4.5cqi;
    font-weight: 800;
    line-height: 1.25;
    color: oklch(1 0 0);
  }

  .about__title-main {
    font-family: var(--font-hero);
    font-size: 8cqi;
    font-weight: 800;
    line-height: 1.25;
    color: var(--color-accent);
    text-align: center;
  }

  .about__title-strong {
    position: relative;
    display: inline;
    color: var(--color-accent-light);
    padding-inline: 1cqi;
    isolation: isolate;

    &::before {
      content: "";
      position: absolute;
      inset-inline: 0;
      inset-block-start: 1cqi;
      inset-block-end: 0cqi;
      background-color: var(--color-accent);
      z-index: -1;
    }
  }

  /* Team photo */
  .about__team {
    display: block;
    inline-size: 100%;
    block-size: auto;
    padding-inline: 6cqi;
    margin-block-end: 6cqi;
  }

  /* Texts */
  .about__texts {
    display: flex;
    flex-direction: column;
    gap: 4cqi;
    padding-inline: 6cqi;
    margin-block-end: 8cqi;
  }

  .about__text {
    font-family: var(--font-hero);
    font-size: 4cqi;
    font-weight: 700;
    line-height: 1.8;
    color: oklch(0.13 0 0);
    max-inline-size: none;
    text-wrap: wrap;
  }

  .about__em {
    font-weight: 800;
    color: oklch(0.5 0.2 265);
  }

  /* Infographic */
  .about__infographic {
    display: block;
    inline-size: 92cqi;
    block-size: auto;
    margin-inline: auto;
    margin-block-end: 10cqi;
  }

  /* Table title */
  .about__table-section {
    padding-inline: 6cqi;
    margin-block-end: 10cqi;
  }

  .about__table-title {
    font-family: var(--font-hero);
    font-size: 7cqi;
    font-weight: 800;
    line-height: 1.35;
    color: var(--color-accent);
    text-align: center;
    margin-block-end: 4cqi;
  }

  .about__table-title-strong {
    position: relative;
    display: inline;
    color: var(--color-accent-light);
    padding-inline: 1cqi;
    isolation: isolate;

    &::before {
      content: "";
      position: absolute;
      inset-inline: 0;
      inset-block-start: 1cqi;
      inset-block-end: 0;
      background-color: var(--color-accent);
      z-index: -1;
    }
  }

  /* Table */
  .about__table {
    inline-size: 100%;
    border-collapse: collapse;
    font-family: var(--font-hero);
    font-size: 3.5cqi;
    font-weight: 700;
    line-height: 1.25;
    color: oklch(0.13 0 0);
  }

  .about__table col:nth-child(1) { inline-size: 36%; }
  .about__table col:nth-child(2) { inline-size: 18%; }
  .about__table col:nth-child(3) { inline-size: 46%; }

  .about__table thead th {
    padding: 4cqi 1.5cqi;
    font-weight: 700;
    font-size: 3.5cqi;
    text-align: center;
    vertical-align: middle;
  }

  .about__table thead th:nth-child(1),
  .about__table thead th:nth-child(2) {
    background-color: var(--color-accent);
    color: oklch(1 0 0);
    border: 1.5px solid var(--color-accent);
  }

  .about__table thead th:nth-child(3) {
    background-color: oklch(0.9 0.03 260);
    color: var(--color-accent);
    border: 1.5px solid var(--color-accent);
  }

  .about__table tbody td {
    padding: 2.5cqi 1.5cqi;
    text-align: center;
    vertical-align: middle;
    border-inline-start: 1.5px solid var(--color-accent);
    border-inline-end: 1.5px solid var(--color-accent);
    border-block-end: 1px solid var(--color-accent);
  }

  .about__table tbody td:nth-child(2) {
    border-inline: none;
  }

  .about__table tbody tr:nth-child(odd) td {
    background-color: oklch(1 0 0);
  }

  .about__table tbody tr:nth-child(even) td {
    background-color: oklch(0.93 0.015 260);
  }

  .about__table tbody tr:last-child td {
    border-block-end: 1.5px solid var(--color-accent);
  }

  .about__table tbody td:first-child {
    text-align: center;
    font-weight: 700;
    font-size: 3.5cqi;
  }

  .about__table tbody td:last-child {
    text-align: center;
    font-size: 3.5cqi;
    font-weight: 400;
    color: oklch(0.13 0 0);
  }

  .about__table-check {
    display: block;
    inline-size: 5.5cqi;
    block-size: 5.5cqi;
    margin-inline: auto;
  }

  .about__table-note {
    font-family: var(--font-hero);
    font-size: 3cqi;
    font-weight: 700;
    line-height: 1.25;
    color: oklch(0.5 0.03 260);
    margin-block-start: 2cqi;
  }

  /* For beginner */
  .about__beginner {
    padding-inline: 6cqi;
    margin-block-end: 10cqi;
  }

  .about__beginner-header {
    background-color: oklch(0.45 0.22 265);
    border-radius: 2.5cqi 2.5cqi 0 0;
    padding: 2.5cqi 3cqi 2cqi;
    text-align: center;
  }

  .about__beginner-heading {
    font-family: var(--font-hero);
    font-size: 5cqi;
    font-weight: 800;
    line-height: 1.25;
    color: var(--color-accent-light);
  }

  .about__beginner-body {
    background-color: oklch(1 0 0);
    border: 4px solid oklch(0.45 0.22 265);
    border-block-start: none;
    border-radius: 0 0 2.5cqi 2.5cqi;
    padding: 4cqi;
  }

  .about__beginner-text {
    font-family: var(--font-hero);
    font-size: 4cqi;
    font-weight: 700;
    line-height: 1.6;
    color: oklch(0.13 0 0);
    max-inline-size: none;
    text-wrap: wrap;
    margin-block-end: 4cqi;
  }

  .about__beginner-box {
    background-color: var(--color-accent-light);
    border-radius: 1.25cqi;
    padding: 4cqi;
    display: flex;
    align-items: center;
    gap: 3cqi;
  }

  .about__beginner-box-text {
    font-family: var(--font-hero);
    font-size: 4cqi;
    font-weight: 700;
    line-height: 1.6;
    color: oklch(0.13 0 0);
    flex: 1;
    min-width: 0;
    max-inline-size: none;
    text-wrap: wrap;
  }

  .about__beginner-char {
    inline-size: 16cqi;
    block-size: auto;
    flex-shrink: 0;
  }

  /* CTA */
  .about__cta {
    background-color: var(--color-accent);
    border-radius: 2.5cqi;
    padding: 10cqi 6cqi 8cqi;
    margin-inline: 6cqi;
  }

  .about__cta-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2cqi;
    margin-block-end: 1cqi;
  }

  .about__cta-badge {
    display: inline-flex;
    min-inline-size: max-content;
    align-items: center;
    justify-content: center;
    background-color: var(--color-accent-light);
    border-radius: var(--radius-full);
    padding-block: 1cqi;
    padding-inline: 3cqi;
    font-family: var(--font-hero);
    font-size: 4cqi;
    font-weight: 800;
    line-height: 1.35;
    color: var(--color-accent);
  }

  .about__cta-desc {
    font-family: var(--font-hero);
    font-size: 4cqi;
    font-weight: 700;
    line-height: 1.35;
    color: var(--color-accent-light);
    text-align: center;
  }

  .about__cta-main {
    font-family: var(--font-hero);
    font-size: 10cqi;
    font-weight: 800;
    line-height: 1.35;
    color: var(--color-accent-light);
    text-align: center;
  }

  .about__cta-char {
    position: relative;
    z-index: 1;
    display: block;
    inline-size: 72cqi;
    block-size: auto;
    margin-inline: auto;
    margin-block-end: -6.4cqi;
  }

  .about__cta-buttons {
    display: flex;
    flex-direction: column;
    gap: 2cqi;
    margin-block-end: 4cqi;
  }

  .about__cta-btn-web {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 100%;
    padding-block: 5.5cqi;
    background-color: var(--color-accent-light);
    border: none;
    border-radius: 2.5cqi;
    box-shadow: inset 0 -4px 0 0 oklch(0.6 0.15 120);
    font-family: var(--font-hero);
    font-size: 5.5cqi;
    font-weight: 800;
    line-height: 1.6;
    letter-spacing: 0.05em;
    color: var(--color-accent);
    text-decoration: none;
  }

  .about__cta-btn-tel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    inline-size: 100%;
    padding-block: 4cqi;
    background-color: oklch(1 0 0);
    border: 2px solid oklch(1 0 0);
    border-radius: 2.5cqi;
    box-shadow: inset 0 -4px 0 0 oklch(0.8 0.01 260);
    text-decoration: none;
    gap: 0.5cqi;
  }

  .about__cta-btn-tel-label {
    font-family: var(--font-hero);
    font-size: 3.75cqi;
    font-weight: 700;
    line-height: 1.35;
    color: var(--color-accent);
  }

  .about__cta-btn-tel-number {
    font-family: var(--font-hero);
    font-size: 5cqi;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: 0.05em;
    color: var(--color-accent);
  }

  .about__cta-hours {
    font-family: var(--font-hero);
    font-size: 3.5cqi;
    font-weight: 700;
    line-height: 1.35;
    color: oklch(1 0 0);
    text-align: center;
  }
}