.drawer {
  display: grid;
}

.drawer.vertical {
  grid-template-rows: 1fr;
}

.content {
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.drawer.vertical:global(.animation-enter) {
  grid-template-rows: 0fr;
}

.drawer.vertical:global(.animation-enter-active) {
  grid-template-rows: 1fr;
  transition: grid-template-rows 1000ms ease-in-out;
}

.drawer.vertical:global(.animation-exit) {
  transition: grid-template-rows 500ms ease-in-out;
  grid-template-rows: 1fr;
}

.drawer.vertical:global(.animation-exit-active) {
  grid-template-rows: 0fr;
}

.drawer.vertical:global(.animation-exit-done) {
  grid-template-rows: 0fr;
}

.drawer.horizontal {
  grid-template-columns: 1fr;
}

.drawer.horizontal:global(.animation-enter) {
  grid-template-columns: 0fr;
}

.drawer.horizontal:global(.animation-enter-active) {
  grid-template-columns: 1fr;
  transition: grid-template-columns 1000ms ease-in-out;
}

.drawer.horizontal:global(.animation-exit) {
  transition: grid-template-columns 500ms ease-in-out;
  grid-template-columns: 1fr;
}

.drawer.horizontal:global(.animation-exit-active) {
  grid-template-columns: 0fr;
}

.drawer.horizontal:global(.animation-exit-done) {
  grid-template-columns: 0fr;
}