.outfits-hero {
  padding-top: var(--space-12);
}

.outfits-hero__grid {
  align-items: center;
  gap: var(--space-8);
}

.outfits-hero__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.outfits-hero__subtitle {
  max-width: 40rem;
}

.outfits-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.outfits-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.outfits-hero__image-wrapper {
  min-height: 260px;
  overflow: hidden;
}

.outfits-hero__image {
  min-height: 260px;
}

.outfits-breadcrumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  padding: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.outfits-breadcrumbs li + li::before {
  content: "/";
  margin-right: var(--space-2);
  color: var(--color-text-muted);
}

.outfits-section__grid {
  align-items: flex-start;
  gap: var(--space-8);
}

.outfits-section__grid--reverse {
  direction: rtl;
}

.outfits-section__grid--reverse > * {
  direction: ltr;
}

.outfits-section__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.outfits-section__image-wrapper {
  min-height: 220px;
  overflow: hidden;
}

.outfits-section__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.outfits-section__header {
  max-width: 40rem;
  margin-inline: auto;
  margin-bottom: var(--space-8);
}

.outfits-types__grid {
  align-items: stretch;
}

.outfits-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.outfits-card .card-body {
  flex: 1;
}

.outfits-list {
  list-style: disc;
  padding-left: var(--space-5);
  color: var(--color-text-soft);
}

.outfits-list li + li {
  margin-top: var(--space-2);
}

.outfits-testimonials {
  display: grid;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.outfits-testimonial__quote {
  margin-bottom: var(--space-2);
  color: var(--color-text-soft);
}

.outfits-testimonial__author {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.outfits-materials__card {
  height: 100%;
}

.outfits-steps {
  list-style: decimal;
  padding-left: var(--space-5);
  color: var(--color-text-soft);
}

.outfits-steps li + li {
  margin-top: var(--space-2);
}

.outfits-business__side,
.outfits-capsule__highlights,
.outfits-fit__summary,
.outfits-how-to-buy__info {
  align-self: stretch;
}

@media (max-width: 899px) {
  .outfits-hero {
    padding-top: var(--space-8);
  }

  .outfits-hero__grid {
    gap: var(--space-6);
  }

  .outfits-section__grid--reverse {
    direction: ltr;
  }
}

@media (max-width: 599px) {
  .outfits-hero__cta,
  .outfits-section__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .outfits-hero__image-wrapper,
  .outfits-section__image-wrapper {
    min-height: 200px;
  }
}