.grid {
  display: grid;
  gap: var(--gap, 2rem);
}
.grid .item img {
  width: 100%;
}

.m-1-col { grid-template-columns: repeat(1, 1fr); }
.m-2-col { grid-template-columns: repeat(2, 1fr); }

@media (min-width: 768px) {
  .t-1-col { grid-template-columns: repeat(1, 1fr); }
  .t-2-col { grid-template-columns: repeat(2, 1fr); }
  .t-3-col { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
  .d-1-col { grid-template-columns: repeat(1, 1fr); }
  .d-2-col { grid-template-columns: repeat(2, 1fr); }
  .d-3-col { grid-template-columns: repeat(3, 1fr); }
  .d-4-col { grid-template-columns: repeat(4, 1fr); }
}
.grid .item {
  border: 4px solid #a9cdf2;
  background: white;
  border-radius: 25px;
  overflow: hidden;
  padding: 30px;
}