@layer components {
  @scope (.repair) {
    :scope {
      container-type: inline-size;
      background-color: var(--wp--custom--color--surface-blue);
      padding-block: clamp(3.5rem, 2.923rem + 2.308cqi, 5rem);
      padding-inline: 1.5rem;
    }

    .repair__heading {
      margin-block: 0 clamp(3rem, 2.808rem + 0.769cqi, 3.5rem);
      font-size: clamp(1.5rem, 1.308rem + 0.769cqi, 2rem);
      font-weight: 700;
      color: var(--wp--preset--color--contrast);
      text-align: center;
      line-height: 1;
    }

    .repair__list {
      display: grid;
      gap: clamp(1.5rem, 2.192rem - 0.769cqi, 2rem);
      max-inline-size: 67.5rem;
      margin-inline: auto;
    }

    @container (inline-size > 600px) {
      .repair__list {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @container (inline-size > 960px) {
      .repair__list {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    .repair__card {
      display: flex;
      align-items: center;
      gap: 1.5rem;
      background-color: var(--wp--preset--color--base);
      border: 1px solid var(--wp--custom--color--brand);
      border-radius: 0.3125rem;
      padding-block: clamp(1rem, 0.808rem + 0.769cqi, 1.5rem);
      padding-inline: 2rem;
    }

    .repair__icon {
      inline-size: 4.5rem;
      block-size: 4.5rem;
      flex-shrink: 0;
      border-radius: 50%;
      object-fit: cover;
    }

    .repair__card-title {
      margin-block: 0;
      font-size: 1.25rem;
      font-weight: 500;
      color: var(--wp--preset--color--contrast);
    }
  }
}