.sectionlinks {
  @include section-padding-top;
  @include section-padding-bottom;

  @if $enable-light-color-section-link {
    h2,
    span,
    p {
      color: #fff;
    }
  }
  background: $section-link-background-color;
  position: relative;

  .section_files_list {
    @include ul-rm-padding;
  }

  .display-paysage {
    .table_image:not(.no-image) {
      .image.d-block.is-image.w-100 {
        aspect-ratio: 1.67;
        background-size: auto;
        background-repeat: no-repeat;
        margin-bottom: 10px;
      }
    }
  }

  .display-portrait {
    .table_image:not(.no-image) {
      .image.d-block.is-image.w-100 {
        aspect-ratio: 0.7;
        margin-bottom: 10px;
      }
    }
  }

  li {
    list-style: none;

    .section_files_link {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .section_files_image {
        width: 36px;
        height: 44px;
        margin-left: 1rem;

        @include media-breakpoint-up(md) {
          width: 160px;
          height: 121px;
          margin-left: 0;
        }
        position: relative;

        img {
          @include fit-cover;
        }
      }

      .section_files_text {
        .section_files_item_description {
          margin: 0;
        }
      }
    }
  }
}

// for bal
.sectionfiles {
  .section-container.section_links {
    @include media-breakpoint-up(lg) {
      display: flex;
      gap: 6.8181%;
    }

    .section_files_list {
      margin-bottom: 0;
      max-width: max-content;

      @include media-breakpoint-up(lg) {
        max-width: inherit;
      }
    }
  }

  .section-title {
    &::before {
      display: inline-block;
      vertical-align: middle;
      margin-right: 1.5rem;
    }
  }

  .section_files_link {
    border: solid 1px rgba(255, 255, 255, 25%);
    border-radius: 10px 10px 10px 0;
    text-decoration: none;

    &:hover,
    &:focus {
      background: rgba(255, 255, 255, 9%);
      border: solid 1px rgba(255, 255, 255, 0%);
    }

    &::after {
      content: "";
      width: 30px;
      height: 30px;
      border: 1px solid #fff;
      border-radius: 30px;
      margin-right: 1rem;
      background-size: 35%;

      @include media-breakpoint-up(lg) {
        width: 60px;
        height: 60px;
        background-size: initial;
        margin-right: 2.5rem;
        flex-shrink: 0;
      }
    }

    .section_files_image {
      border-radius: 10px 10px 10px 0;
      flex-shrink: 0;

      @include media-breakpoint-up(md) {
        border: 1px solid #fff;
      }

      img {
        border-radius: 10px 10px 10px 0;
        display: none;

        @include media-breakpoint-up(md) {
          display: block;
        }
      }
    }

    .section_files_text {
      font-weight: bold;
      font-size: 1.125rem;
      max-width: 300px;
      margin: 1rem 1.5rem;

      @include media-breakpoint-up(lg) {
        margin: 1rem 2.5rem;
      }
    }
  }
}