@use "../variables" as *;
@use "../mixins" as *;
@use "../utils" as *;

.mie.clamp {
  flex-direction: column;
  align-items: center;
  display: flex;

  // prettier-ignore
  padding:
    mvar("clamp.container.padding.v")
    mvar("clamp.container.padding.h");

  > .header {
    flex-direction: column;
    display: flex;

    max-width: mvar("clamp.size");
    width: mvar("clamp.size");

    margin-right: indent();
    margin-left: indent();
    margin-bottom: 2.5rem;
  }

  > .content {
    max-width: mvar("clamp.size");
    width: mvar("clamp.size");

    @include media-breakpoint-down(md, $media-breakpoints) {
      max-width: auto;
      width: 100%;
    }
  }
}
