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

.planogram-lifecycle-strategic-section-title {
  text-align: center;
  margin: 0 auto 1rem;
  max-width: 580px;
}

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

.strategic .section-title,
.planogram-lifecycle-strategic-section-title :is(h1, h2, h3, h4, h5, h6, p) {
  text-align: center;
  margin: 0 auto;
  margin-bottom: 1rem;
  max-width: 580px;
  font-size: clamp(1.75rem, 1.4466rem + 1.2945vw, 3rem);
  font-weight: 400;
}

.strategic .section-title span:not([class*="rt-color-"]),
.planogram-lifecycle-strategic-section-title span:not([class*="rt-color-"]) {
  color: var(--primary-orange);
  font-style: italic;
  font-weight: 400;
}

.strategic .section-description,
.planogram-lifecycle-strategic-section-description :is(p) {
  text-align: center;
  font-size: clamp(1.125rem, 1.0643rem + 0.2589vw, 1.375rem);
  color: var(--typography-black-2);
}

.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 img {
  margin-bottom: 2rem;
}
.strategic {
  margin-bottom: 5rem;
}

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

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

.strategic-card h3,
.planogram-lifecycle-strategic-card-title :is(h1, h2, h3, h4, h5, h6, p) {
  font-weight: 500;
  color: var(--typography-black-1);
  margin-bottom: 0.75rem;
  font-size: clamp(1.3125rem, 1.267rem + 0.1942vw, 1.5rem);
}

.strategic-card p,
.planogram-lifecycle-strategic-card-description :is(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 (max-width: 768px) {
  .strategic {
    margin-bottom: 3rem;
  }
}

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