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

  .grid-container {
    display: grid;
    row-gap: $spacing-xl;
  }

  &__heading {
    display: grid;
    width: 100%;
    max-width: $width-md;
    margin: auto;
    text-align: center;
    row-gap: $spacing-xsm;
  }

  &__content {
    @include media-down(lg) {
      display: grid;
    }

    .item {
      display: grid;
      grid-template-columns: 0.5fr auto 1fr;

      
      @include media-down(lg) {
        grid-template-columns: auto 1fr;

        &:not(&.headline) {
          border-top: 1px solid $color-black20;
          border-bottom: 1px solid $color-black20;
        }
      }

      &:not(:first-child) {
        margin-top: -1px;
      }

      > * {
        padding: $spacing-md;

        @include media-up(lg) {
          border: 1px solid $color-black20;

          &:first-child {
            border-left: 0;
          }

          &:last-child {
            border-right: 0;
          }
        }

        @include media-down(lg) {
          padding: $spacing-sm $spacing-xs;
        }
      }

      h5 {
        border: 0;
      }

      &-label {
        p {
          font-weight: $font-weight-bold;
        }

        span {
          color: $color-black40;
        }

        @include media-down(lg) {
          @include col-span(2)
        }
      }

      &-icon {
        border-left: 0;
        border-right: 0;

        span {
          display: flex;
          width: 32px;
          height: 32px;
          border-radius: 100%;
          justify-content: center;
          align-items: center;
        }

        &.icon {
          &-checked {
            span {
              background-color: $color-accent;
              @include icon('@/Images/icons/check.svg', 16px);
            }
          }

          &-unchecked {
            span {
              background-color: $color-black20;
              @include icon('@/Images/icons/close.svg', 16px);
            }
          }
        }
      }

      &-txt {
        @include media-down(lg) {
          margin-top: -1px;
          border-left: 0;
        }
      }
    }
  }
}