.block-note {
  inline-size: 100%;
  background-color: $color-white;

  &-wrap {
    display: grid;
    grid-template-columns: 1fr 2fr;
    padding: $spacing-xl;
    gap: $spacing-md $spacing-lg;

    @include media-down(lg) {
      grid-template-columns: 1fr;
      padding: $spacing-xl $spacing-md;
    }

    &.bg-color-white {
      border: 1px solid $color-black20;
    }

    @include media-up(lg) {
      &:has(.block-note__icon) {
        grid-template-columns: auto 1fr 2fr;
      }
    }
  }

  &__icon {
    span {
      // display: flex;
      display: none;
      @include icon('@/Images/icons/paragraph.svg', 36px);
    }

    svg {
      width: 36px;
      height: 36px;
      stroke: $color-black;
      stroke-width: 0.5px;
    }
  }

  &__info {
    display: grid;
    row-gap: $spacing-xs;
    align-content: start;
  }
}