body,
html {
  height: 100%;
}

html {
  overflow-y: auto;
}

img:not([src]) {
  display: none;
}

.container,
.container-fluid,
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm {
  padding-left: calc(var(--bs-gutter-x));
  padding-right: calc(var(--bs-gutter-x));
}

.container-expand {
  margin-left: $grid-gutter-width * -1;
  margin-right: $grid-gutter-width * -1;
}

// Basic flex grid
// @link https://smolcss.dev/#smol-flexbox-grid
.flex {
  --min: min(10ch, 50%);
  --gap: #{$grid-gutter-width};

  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  align-items: center;
  justify-content: space-between;

  > * {
    flex: 1 1 var(--min);
  }
}

// Simple animation for new elements
// @link https://thinkdobecreate.com/articles/css-animating-newly-added-element/
@keyframes show {
  100% {
    opacity: 1;
    transform: none;
  }
}