@import '../../../scss/styles.scss';

.blocks-drawer {
  &__blocks-wrapper {
    padding-top: base(1.5);
  }

  &__blocks {
    position: relative;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: base(1);
  }

  &__default-image {
    width: 100%;
    overflow: hidden;
    padding-top: base(0.75);
  }

  @include large-break {
    &__blocks {
      grid-template-columns: repeat(5, 1fr);
    }
  }

  @include mid-break {
    &__blocks-wrapper {
      padding-top: base(1.75);
    }
    &__blocks {
      grid-template-columns: repeat(3, 1fr);
      gap: base(0.5);
    }
  }

  @include small-break {
    &__blocks-wrapper {
      padding-top: base(0.75);
    }

    &__blocks {
      grid-template-columns: repeat(2, 1fr);
    }
  }
}
