/*
$breakpoints:(
    "xs" "(max-width: 375px)",
    "s" "(max-width: 480px)",
    "m" "(max-width: 768px)",
    "l" "(max-width: 1024px)",
    "xl" "(min-width: 1025px)"
);
*/
.parallax-container {
  background-color: #f3f3f3;
  background-position: top center;
  align-items: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  height: 600px;
  justify-content: flex-end;
  position: relative; }
  .parallax-container .outer {
    width: 100%;
    height: 10px; }
    @media only screen and (max-width: 768px) {
      .parallax-container .outer {
        height: 180px; } }
  .parallax-container .inner {
    width: 100%;
    height: 186px;
    position: absolute;
    bottom: 0; }
    @media only screen and (max-width: 768px) {
      .parallax-container .inner {
        height: 180px; } }

.parallax-container.static-scroll {
  background-position: center -50px; }