@layer component {
  .paragraph--industry-reports {
    container-type: inline-size;

    & .field--field-reports {
      display: flex;
      align-items: start;
      justify-content: center;
      gap: 0.625rem;
    }
  }

  .paragraph--industry-reports.paragraph--view-mode--default {
    padding-block: 2.25rem;
    background-color: var(--color-background-accent);

    & .industry-reports__second {
      container-type: inline-size;
    }

    h2 {
      margin-block-end: 0.625rem;
    }

    & .field--field-description {
      color: var(--color-text-secondary);
      font: var(--font-body-s-semibold);
      letter-spacing: var(--letter-spacing-body-s-semibold);
    }

    & .field--field-reports {
      margin-block-start: 2.25rem;
    }

    & .list-links {
      margin-block-start: 2.25rem;
    }
  }

  @media screen and (min-width: 48rem) {
    .paragraph--industry-reports .field--field-reports {
      gap: 1.25rem;
    }

    .paragraph--industry-reports.paragraph--view-mode--default {
      padding-block: 3rem;

      & .paragraph__inner {
        display: flex;
        gap: 4.5rem;
      }

      & .industry-reports__first {
        flex-basis: 42%;
      }

      & .industry-reports__second {
        flex-basis: 51%;
      }

      h2 {
        font: var(--font-head-xl-light);
        letter-spacing: var(--letter-spacing-head-xl-light);
        margin-block-end: 1.25rem;
      }

      & .field--field-description {
        font: var(--font-body-l-semibold);
        letter-spacing: var(--letter-spacing-body-l-semibold);
      }

      & .field--field-reports {
        display: flex;
        gap: 1.25rem;
        margin-block-start: 0;
      }
    }

    @container (max-width: 18rem) {
      .paragraph--industry-reports .field--field-reports {
        flex-direction: column;
        align-items: center;

        & img {
          max-block-size: 11.25rem;
          width: auto;
        }
      }
    }
  }
}