/* merch-soft.css */
.strategic {
  padding: 3.75rem 0;
  margin-bottom: 3.5rem;
}

.strategic .section-text {
  width: 100%;
  max-width: 786px;
  margin: 0 auto;
  margin-bottom: 3.75rem;
}

.strategic .section-title {
  text-align: center;
  margin-bottom: 0.875rem;
}

/* In order to display correct with wagtail RichTextField */
.space-soft-strategic-section-title :is(h1, h2, h3, h4, h5, h6) {
  text-align: center;
  margin-bottom: 0.875rem;
}

.space-soft-strategic-section-title span:not([class*="rt-color-"]) {
  color: var(--primary-orange);
  font-style: italic;
}

.strategic-card :is(h2) {
  font-weight: 500;
  color: var(--typography-black-1);
  margin-bottom: 2rem;
  font-size: clamp(1.3125rem, 1.267rem + 0.1942vw, 1.5rem);
}

.strategic .section-description {
  text-align: center;
}

.strategic-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  gap: 1.312rem;
  justify-content: center;
}

.strategic-card {
  border: 1px solid var(--border-orange-1);
  background: var(--grayscale-color-1);
  border-radius: 25px;
  padding: 20px;
}

.strategic-card-label {
  padding: 0.5rem 1rem;
  border-radius: 50px;
  background: var(--border-orange-4);
  color: var(--primary-orange);
  font-size: clamp(0.875rem, 0.8447rem + 0.1294vw, 1rem);
  margin-bottom: 0.75rem;
  width: fit-content;
}

.strategic-card-label-second {
  color: var(--typography-black-3);
  background: var(--descriptive-color-7);
}

.strategic-card h3 {
  font-weight: 500;
  color: var(--typography-black-1);
  margin-bottom: 2rem;
  font-size: clamp(1.3125rem, 1.267rem + 0.1942vw, 1.5rem);
}

.strategic-card p {
  color: var(--typography-black-2);
  font-size: clamp(0.875rem, 0.8447rem + 0.1294vw, 1rem);
}

@media screen and (max-width: 992px) {
  .strategic-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 768px) {
  .strategic {
    padding: 3.75rem 0;
    margin-bottom: 3.5rem;
  }

  .strategic .section-text {
    margin-bottom: 20px;
  }

  .strategic-container {
    grid-template-columns: 1fr;
  }
}
