/*
    - Name: "field-document.scss"
    - Description: "Add custom styles to Download Custom Block"
*/

@import '../../variables/variables';

.block-inline-blockfiles {
  &.block-view-mode-full {
    h2 {
      margin-bottom: 20px;
    }
    .field--name-body {
      margin-bottom: 38px;
    }
    .field--name-field-file {
      display: grid;
      grid-template-columns: 1fr;
      gap: 20px;
      margin-bottom: 0;
      
      @include media-breakpoint-up(md) {
        grid-template-columns: repeat(2, 1fr);
      }
      @include media-breakpoint-up(xl) {
        grid-template-columns: repeat(4, 1fr);
      }
      

}

      .field__item {
        .field__document--custom {
          position: relative;
          height: 100%;
          padding: 40px;
          border-radius: 40px;
          background-color: var(--primary-light);

          a {
            display: flex;
            flex-direction: column;
            gap: 20px;
            place-content: space-around space-between;
            height: inherit;
            text-decoration: none;

            @include stretchedLink;

            &:hover {
              .file--title__line {
                width: 180px;
              }
            }
          }

          .file--title {
            &::before {
              content: '\e91a';
              display: block;
              padding: 0;
              border: 0;

              font-family: "icomoon";
  font-weight: normal;
  font-style: normal;
  font-variant: normal;
  font-size: 1.5rem;
  line-height: 1;
  text-transform: none;
            }

            .file--title__line {
              width: 80px;
              height: 4px;
              margin: 12px 0;
              border-radius: 10px;
              background-color: var(--primary-color);
              transition: width 0.4s ease;
            }

            .file--title__content {
              color: var(--black);
              font-size: var(--font-15);
              line-height: 23px;
              text-decoration: none;

              @include bold;
            }
          }

          .file--specifications {
            color: var(--black);
            font-size: var(--font-13);
            line-height: 18px;

            font-size: var(--font-13);
  line-height: 1.125rem;
  font-family: "Inter", sans-serif;
  font-weight: 300;
  font-optical-sizing: auto;

            .file--type {
              margin-right: 8px;
              padding-right: 5px;
              border-right: 1px solid black;
            }
          }
        }
      }
    }
  }
}
@media (min-width: 768px) {
  .block-inline-blockfiles.block-view-mode-full .field--name-field-file {
    grid-template-columns: repeat(2, 1fr);
  }
}

      @media (min-width: 1200px) {
  .block-inline-blockfiles.block-view-mode-full .field--name-field-file {
    grid-template-columns: repeat(4, 1fr);
  }