@import url("../eggtuck/styles.css");

:root {
  --orange: #8d5d3d;
  --accent: #76abc4;
  --card-orange: #a54d3f;
}

.order-cards.order-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.order-card:nth-child(2) {
  background: var(--paper);
  transform: rotate(0.8deg);
  box-shadow: 5px 5px 0 var(--yellow);
}

.order-card.green-edge {
  transform: rotate(-0.8deg);
  box-shadow: 5px 5px 0 var(--orange);
}

.order-card.wine-edge {
  transform: rotate(-0.7deg);
  box-shadow: 5px 5px 0 #a54d3f;
}

.order-card.orange-edge {
  transform: rotate(0.6deg);
  box-shadow: 5px 5px 0 var(--card-orange);
}

@media (max-width: 850px) {
  .order-cards.order-grid {
    grid-template-columns: 1fr;
  }

}