@use "@uqds/core/src/scss/global" as core;
@use "global" as *;

.uq-section {
  margin-bottom: var(--section-spacing);
}

.uq-section__header {
  margin-bottom: core.$space-l;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: core.$space-m core.$space-l;

  &:only-child {
    margin-bottom: 0;
  }
}

.uq-section__title {
  margin: 0;
  color: core.$black;
  font-size: var(--section-font-size-xxxl);

  @media #{core.$screen-md-up} {
    order: 1;
  }
}

.uq-section__description {
  width: 100%;

  @media #{core.$screen-md-up} {
    order: 3;
  }

  & p,
  & ul,
  & ol {
    &:last-child {
      margin-bottom: 0;
    }
  }
}

.uq-section__link {
  @media #{core.$screen-md-up} {
    order: 2;
  }
}

.uq-section--no-margin {
  margin-bottom: 0;
}

.uq-section--shaded {
  background: core.$grey-50;
  padding: var(--section-padding);
}