.formats {
   &__wrapper {
   }

   &__h2 {
      color: cl("accent");
      margin-bottom: 16px;

      @include _Tablet {
         margin-bottom: 24px;
      }

      @include _XSDesktop {
         margin-bottom: 32px;
      }
      @include _Desktop {
         margin-bottom: 24px;
      }
      @include _HDesktop {
         margin-bottom: 32px;
      }
   }

   &__descr {
      margin-bottom: 24px;

      @include _Tablet {
         margin-bottom: 32px;
         max-width: 70%;
      }

      @include _XSDesktop {
         max-width: 67%;
      }
      @include _Desktop {
         max-width: 55%;
      }
      @include _HDesktop {
         margin-bottom: 60px;
         max-width: 50%;
      }
   }

   &__body {
   }

   &__list {
      display: grid;
      gap: 20px;
      @include _Tablet {
         grid-template-columns: repeat(2, 1fr);
      }

      @include _XSDesktop {
         grid-template-columns: repeat(3, 1fr);
      }

      @include _Desktop {
         grid-template-columns: repeat(4, 1fr);
      }
   }

   &__item {
      aspect-ratio: 17 / 13;
      &:nth-child(n + 7) {
         display: none;
      }

      @include _Tablet {
         aspect-ratio: 22 / 17;
      }

      @include _XSDesktop {
         aspect-ratio: 30 / 23;
      }

      @include _Desktop {
         aspect-ratio: 13 / 10;

         &:nth-child(n) {
            display: block;
         }

         &:nth-child(n + 9) {
            display: none;
         }
      }

      @include _HDesktop {
         aspect-ratio: 89 / 69;
      }
   }

   &__link {
      display: flex;
      justify-content: center;
      margin-top: 32px;
      font-size: 12px;

      @include _Tablet {
      }

      @include _XSDesktop {
         margin-top: 32px;
         font-size: 12px;
      }

      @include _Desktop {
         margin-top: 40px;
      }

      @include _HDesktop {
         font-size: 14px;
      }

      &.arrow-link .arrow-link__arrow {
         width: 40px;
         height: 40px;
      }
   }
}
