.grid {
  --grid-bg: rgba(74, 74, 74, 0.3);
  --grid-border: #4a4a4a;
  --grid-accent: #e8c72e;
  --grid-accent-hover: #c23a22;
  --grid-text: #d4d0c8;

  display: grid;
  gap: 20px;
  position: relative;
  width: 100%;
}

.item {
  position: relative;
  background: var(--grid-bg);
  border: 1px solid var(--grid-border);
  padding: 30px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, z-index 0s;
  cursor: default;
  overflow: hidden;
}

.item:hover {
  z-index: 10;
  transform: rotate(0deg) translate(0, 0) !important;
}

.itemSolid {
  border-style: solid;
}

.itemDashed {
  border-style: dashed;
}

.itemDouble {
  border-style: double;
  border-width: 3px;
}

.withShadow:hover {
  box-shadow: 8px 8px 0 var(--grid-accent);
}

.withShadowDark:hover {
  box-shadow: 8px 8px 0 var(--grid-accent-hover);
}

.title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin-bottom: 15px;
  color: var(--grid-accent);
}

.description {
  font-size: 0.9rem;
  line-height: 1.6;
  opacity: 0.7;
  color: var(--grid-text);
}

.truncated {
  overflow: hidden;
  max-height: 4.8em;
  position: relative;
}

.truncated::after {
  content: '█████████';
  position: absolute;
  bottom: 0;
  right: 0;
  background: var(--grid-bg);
  color: var(--grid-border);
  padding-left: 10px;
  font-size: 0.8em;
}

/* Column variations */
.cols1 { grid-template-columns: repeat(1, 1fr); }
.cols2 { grid-template-columns: repeat(2, 1fr); }
.cols3 { grid-template-columns: repeat(3, 1fr); }
.cols4 { grid-template-columns: repeat(4, 1fr); }
.cols6 { grid-template-columns: repeat(6, 1fr); }
.cols12 { grid-template-columns: repeat(12, 1fr); }

/* Span helpers */
.spanCol1 { grid-column: span 1; }
.spanCol2 { grid-column: span 2; }
.spanCol3 { grid-column: span 3; }
.spanCol4 { grid-column: span 4; }
.spanCol6 { grid-column: span 6; }
.spanRow1 { grid-row: span 1; }
.spanRow2 { grid-row: span 2; }

/* Responsive */
@media (max-width: 768px) {
  .grid {
    grid-template-columns: 1fr !important;
  }

  .spanCol1, .spanCol2, .spanCol3, .spanCol4, .spanCol6 {
    grid-column: span 1;
  }
}