aarongustafson

@media (min-width: 20em) {
  .gallery__item {
    float: left;
    width: 45%;
    width: calc( 50% - 0.69rem);
    margin: 1.375rem 0 0 1.375rem;
    flex: 0 0 calc( 50% - 0.69rem);
  }
}
@media (min-width: 20em) and (max-width: 29.9375em) {

aarongustafson

@media (min-width:600px) {
  .primary {
    float: left;
    width: 68%;
  }
  .secondary {
    float: right;
    width: 32%;
  }
}

aarongustafson

.primary {
  float: left;
  width: 68%;
}
.secondary {
  float: right;
  width: 32%;
}

@media (max-width:599px) {

aarongustafson

@include breakup-breakpoint( "global" ) {
  @keyframes cookie-banner {
    // makes the banner animate in
  }
  @keyframes cookie-banner-reverse {
    // makes the banner animate out
  }

  // Basic banner styles for all screen sizes
}

aarongustafson

@charset "UTF-8";
@import "vendors/_vendors";

// Breakup Configuration
$breakup-included-blocks: ( "tiny" "small" "medium" "large" "larger" "full" );

@import "helpers/_helpers";
@import "base/_base";
@import "components/_components";
@import "pages/_pages";

aarongustafson

@import "config";
@import "functions";
@import "variables";
@import "mixins";
@import "placeholders";

aarongustafson

@import "breakup.scss";
$breakup-included-blocks: ( "global" );
$breakup-naked: true;
$breakup-breakpoints-allow-naked: ( "global" );

// @imports for paritals go here.

aarongustafson

@import "breakup.scss";
$breakup-included-blocks: ("tiny" "small" "medium" "large" "larger" "full" );

// @imports for paritals go here.

aarongustafson

@include breakup-breakpoint( "global" ) {
  // some default styles
}

aarongustafson

$breakup-breakpoints: (
  "global":       "screen",
  "tiny":         "(min-width: #{$bp-tiny-em})",
  "small":        "(min-width: #{$bp-small-em})",
  "medium":       "(min-width: #{$bp-medium-em})",
  "large":        "(min-width: #{$bp-large-em})",
  "larger":       "(min-width: #{$bp-larger-em})",
  "full":         "(min-width: #{$bp-full-em})"
);