.mealz-drawer {
  &.with-header {
    .mealz-drawer__content {
      margin-top: 24px;
      margin-bottom: 24px;
    }
  }

  .mealz-drawer__content {
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-color: var(--mealz-ds-color-primary-100),
      var(--mealz-ds-color-primary);
    padding: 0 16px;
    display: grid;
    grid-template-columns: repeat(
      auto-fill,
      min(218px, calc((100% - 12px) / 2))
    );
    box-sizing: border-box;
    justify-content: center;
    margin: -6px;

    > * {
      margin: 6px;
    }
  }
}

@media (min-width: 375px) and (max-width: 480px) {
  .mealz-drawer {
    width: 100%;

    .mealz-drawer__content {
      grid-template-columns: repeat(
        auto-fill,
        min(165px, calc((100% - 12px) / 2))
      );
    }
  }
}

@media (max-width: 375px) {
  .mealz-drawer {
    width: 100%;

    .mealz-drawer__content {
      grid-template-columns: repeat(auto-fill, 100%);
    }
  }
}