.block-downloads {
  inline-size: 100%;
  background-color: $color-white;
  overflow: hidden;

  .grid-container {
    display: flex;
    flex-direction: column;
    row-gap: $spacing-sm;
  }

  &__heading {
    display: grid;
    width: 100%;
    max-width: $width-md;
    row-gap: $spacing-xsm;
  }

  &__content {
    display: flex;
    flex: 1;

    .card {
      position: relative;
      display: flex;
      width: 100%;
      padding: $spacing-lg;
      padding-right: calc($spacing-lg + 180px);
      border: 8px solid;
      border-color: var(--var-color);
      flex: 1 0 0;
      flex-direction: column;
      row-gap: $spacing-md;

      @include media-down(sm) {
        padding-right: $spacing-lg;
        padding-bottom: calc($spacing-big + $spacing-md);
      }

      &-info {
        display: grid;
        gap: $spacing-xs;
      }

      &-links {
        display: flex;
        flex-wrap: wrap;
        gap: $spacing-xsm $spacing-lg;

        &:has(:nth-child(3)) {
          flex-direction: column;
        }
      }

      &-brush {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 180px;
        height: 100%;
        background-color: var(--var-color);
        background-repeat: no-repeat;
        background-size: 560px;

        @include media-down(sm) {
          width: 100%;
          height: 80px;
        }

        &.line1 {
          background-image: url('@/Images/brush01.svg');
          background-position: 75% 10%
        }

        &.line2 {
          background-image: url('@/Images/brush02.svg');
          background-position: 55% 80%;
        }

        &.line3 {
          background-image: url('@/Images/brush02.svg');
          background-position: 35% 45%;
        }

        &.line4 {
          background-image: url('@/Images/brush03.svg');
          background-position: 60% 80%
        }

        &.line5 {
          background-image: url('@/Images/brush01.svg');
          background-position: 50% 15%
        }

        &.line6 {
          background-image: url('@/Images/brush03.svg');
          background-position: 55% 20%
        }
      }
    }
  }

  &--grid & {
    &__content {
      &-wrap {
        display: grid;
        width: 100%;
        row-gap: $spacing-sm;
      }
    }
  }

  &--slider & {
    &__content {
      &-wrap {
        display: flex;
        width: fit-content;
        flex-wrap: nowrap;
      }

      .card {
        width: occupies(5, 0);
        margin-right: var(--gap);

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