$dimension-mobile-margin: 24px;
$dimension-mobile-margin-big: 36px;

/*

Divides given total area according to golden ratio:

   numerator
  -----------  =  1.6180...
  denominator

*/

$dimension-golden-ratio: 1.61803398875;

@mixin golden-ratio-numerator($prop, $total) {
  #{$prop}: $total / $dimension-golden-ratio;
}

@mixin golden-ratio-denominator($prop, $total) {
  #{$prop}: $total - ($total / $dimension-golden-ratio);
}

$dimension-card-border-radius: 4px;

@mixin dimensions__section-title {
  margin: 0px $dimension-mobile-margin 36px $dimension-mobile-margin;
}

@mixin dimensions__section-title--limited-width {
  margin: 0px $dimension-mobile-margin 36px $dimension-mobile-margin;

  @media #{$mobile-landscape}, #{$tablet} {
    max-width: 75%;
    margin: 0px auto 48px auto;
  }

  @media #{$desktop} {
    max-width: 75%;
    margin: 0px auto 48px auto;
  }
}

@mixin dimensions__section--paddings {
  padding: 36px 0px 48px 0px;

  @media #{$desktop} {
    padding: 60px 0px 72px 0px;
  }

  @media #{$desktop} {
    padding: 96px 0px;
  }
}

@mixin dimensions__section-paragraph {
  margin: 0px $dimension-mobile-margin 8px $dimension-mobile-margin;

  &:last-of-type {
    margin-bottom: 36px;
  }

  @media #{$mobile-landscape}, #{$tablet} {

    &:last-of-type {
      margin-bottom: 48px;
    }
  }

  @media #{$desktop} {
    &:last-of-type {
      margin-bottom: 48px;
    }
  }
}

@mixin dimensions__section-paragraph--limited-width {
  margin: 18px $dimension-mobile-margin 36px $dimension-mobile-margin;

  @media #{$mobile-landscape}, #{$tablet} {
    max-width: 75%;
    margin: 24px auto 48px auto;
  }

  @media #{$desktop} {
    max-width: 75%;
    margin: 24px auto 48px auto;
  }
}