:root {
  --columns: 4;
  --page-padding: 50px;
}

html {
  scrollbar-width: none;
}

body {
  padding: 150px var(--page-padding) 75px var(--page-padding);
  display: grid;
  grid-template-columns: 50% 1fr;
}

#meteorites {
  display: grid;
  grid-template-columns: repeat(var(--columns), 1fr);
  grid-auto-rows: calc((100vw / var(--columns)) + 25px);
  grid-gap: 1px;
  width: 100%;
  background-color: black;
  grid-column: span 2;
  margin-top: 75px;
}

.meteorite {
  padding: 40px;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  background-color: white;
}

p {
  text-align: center;
}

p.name {
  font-weight: bold;
}

svg {
  margin: 20px 0px;
}

h2 {
  font-size: 50px;
  font-weight: normal;
}

h2 span {
  opacity: 0.25;
  display: block;
}

#buttons {
  align-self: flex-end;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  position: sticky;
  top: 30px;
  z-index: 5;
}

button.sorter {
  margin-left: 20px;
}

button.sorter.selected {
  border-width: 2px;
  font-weight: bold;
}