@layer components {
  .full-service {
    position: relative;
    isolation: isolate;
    block-size: 279.75cqi;
    margin-block-start: -6.5cqi;
    overflow: hidden;
    background-color: oklch(0.4 0 0);
    color: oklch(1 0 0);
    font-family: var(--font-hero);
  }

  .full-service__lead {
    position: absolute;
    inset-block-start: 12cqi;
    inset-inline-start: 19cqi;
    inline-size: 61.75cqi;
    block-size: 10.25cqi;
  }

  .full-service__lead p {
    color: oklch(1 0 0);
    font-size: 5cqi;
    font-weight: 900;
    line-height: 1.4;
    letter-spacing: 0.25cqi;
    text-align: center;
    white-space: nowrap;
  }

  .full-service__lead-line {
    position: absolute;
    inset-block-start: 8cqi;
    inset-inline-start: 0;
    inline-size: 61.5cqi;
    block-size: 2.25cqi;
    max-inline-size: none;
  }

  .full-service__title {
    position: absolute;
    inset-block-start: 24.25cqi;
    inset-inline-start: 5.5cqi;
    inline-size: 88.5cqi;
    font-size: 6.5cqi;
    font-weight: 900;
    line-height: 1.4;
    letter-spacing: 0.325cqi;
    text-align: center;
  }

  .full-service__title span {
    display: block;
    white-space: nowrap;
  }

  .full-service__title span:first-child {
    color: var(--color-highlight);
  }

  .full-service__panel {
    position: absolute;
    inset-block-start: 48.25cqi;
    inset-inline-start: 3.75cqi;
    inline-size: 92.5cqi;
    block-size: 176.25cqi;
    border: 1cqi solid oklch(1 0 0);
    border-radius: 1cqi;
    background-color: oklch(0.97 0 0);
  }

  .full-service-item {
    position: absolute;
    inline-size: 38.25cqi;
    color: var(--color-text-primary);
  }

  .full-service-item--strategy,
  .full-service-item--operation {
    inset-inline-start: 9.25cqi;
  }

  .full-service-item--creative,
  .full-service-item--report {
    inset-inline-start: 52.5cqi;
  }

  .full-service-item--strategy,
  .full-service-item--creative {
    inset-block-start: 53.75cqi;
    block-size: 103.75cqi;
  }

  .full-service-item--operation,
  .full-service-item--report {
    inset-block-start: 133.75cqi;
    block-size: 104.5cqi;
  }

  .full-service-item__icon {
    position: absolute;
    max-inline-size: none;
  }

  .full-service-item__icon--phone {
    inset-block-start: 4.25cqi;
    inset-inline-start: 11.1cqi;
    inline-size: 16.3cqi;
    block-size: 28.55cqi;
  }

  .full-service-item__icon--pen {
    inset-block-start: 5cqi;
    inset-inline-start: 4.25cqi;
    inline-size: 28.27cqi;
    block-size: 28.43cqi;
  }

  .full-service-item__icon--tool {
    inset-block-start: 7.5cqi;
    inset-inline-start: 6.25cqi;
    inline-size: 25.75cqi;
    block-size: 23.5cqi;
  }

  .full-service-item__icon--graph {
    inset-block-start: 6cqi;
    inset-inline-start: 7.5cqi;
    inline-size: 23.2cqi;
    block-size: 26.5cqi;
  }

  .full-service-item__title {
    position: absolute;
    inset-block-start: 38cqi;
    inset-inline-start: 0;
    inline-size: 100%;
    color: var(--color-instagram);
    font-size: 5cqi;
    font-weight: 900;
    line-height: 1.4;
    letter-spacing: 0.25cqi;
    text-align: center;
  }

  .full-service-item__title span {
    display: block;
    white-space: nowrap;
  }

  .full-service-item__text {
    position: absolute;
    inset-block-start: 54cqi;
    inset-inline-start: 0;
    inline-size: 100%;
    color: var(--color-text-primary);
    font-size: 4cqi;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.2cqi;
    text-align: justify;
  }

  .full-service__bottom {
    position: absolute;
    inset-block-start: 230.5cqi;
    inset-inline-start: 3.75cqi;
    inline-size: 92.5cqi;
    font-size: 6cqi;
    font-weight: 900;
    line-height: 1.4;
    letter-spacing: 0.3cqi;
    text-align: center;
  }

  .full-service__bottom span {
    display: block;
    white-space: nowrap;
  }

  .full-service__bottom span:nth-child(2) {
    transform: scaleX(0.9);
  }

  .full-service__bottom strong {
    color: var(--color-highlight);
    font-size: 7.25cqi;
  }

  .full-service__bottom-large {
    font-size: 8cqi;
  }
}