.crate-row{
  display: flex; 
  flex-direction:row; 
  gap:24px;
}

.crate{
  border:1px solid white;
  height:500px;
  width:500px;
  position:relative;
  display:flex;
  justify-content: center;
}

.crate-front{
  background-color:#010b21;
  border:1px solid white;
  height:400px;
  width:500px;
  position:absolute;
  bottom:-100;
  display:flex;
  justify-content: center;
  align-items: center;
  z-index:10;
}

.crate-label{
  border:1px solid white;
  height: 50px;
  width: 100px;
  display:flex;
  align-items: center;
  justify-content: center;
}

.crate-contents{
  display: flex;
  flex-direction: column;
  margin-top:430px;
  height: fit-content;
}

.crate-contents > * {
  margin-top:-482px;
  z-index:0;
}

.divider {
  display:flex;
  flex-direction: column;
  height:490px;
  width:490px;
  pointer-events: none;
  position:relative;
}

.divider-positioner{
  position: absolute;
  top:-20px;
  width:100%;
}

.tab {
  background-color: white;
  color: black;
  padding:4px 8px;
  width:fit-content;
  border:1px solid white;
  font-size:10px;
  border-radius: 4px 4px 0px 0px;
  border-bottom:none;
}

.divider-body {
  border:1px solid white;
  height:490px;
  background-color: white;
  border-radius: 0px 4px 0px 0px;
  width:100%;
}

.record{
  width:490px;
  height:490px;
  border:1px solid white;
  background-color:#010b21;
  background-size: cover;
  border-radius:2px;
  flex-shrink: 0;
  transition: transform 0.2s ease-in-out; 


}

.record:hover {
  transform: translateY(-100px);
  transition: transform 0.2s ease-in-out; 
}

/* Mobile Styles */

@media (max-width: 768px) {

  /* --- */

}