@import "./service.css";

.commerce-selection {
  background: var(--color-bg-darken);
}

.commerce-selection__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}

.commerce-selection__intro,
.commerce-selection__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.commerce-selection__card {
  padding: 32px;
  border-radius: var(--radius-lg);
  background: var(--color-white);
}

.commerce-selection__list {
  display: grid;
  gap: 12px;
  padding-left: 20px;
  margin: 0;
}

.commerce-selection__list li::marker {
  color: var(--color-blue);
}

.commerce-page .advantages-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 800px) {
  .commerce-selection__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
}

@media (max-width: 560px) {
  .commerce-selection__card { padding: 24px; }
  .commerce-selection__card .btn { width: 100%; white-space: normal; text-align: center; }
  .commerce-page .advantages-grid { grid-template-columns: minmax(0, 1fr); }
}