/* stylelint-disable indentation, rule-empty-line-before, number-no-trailing-zeros */
@keyframes jelly {
  0% {
    transform: scale(1, 1); }
  4% {
    transform: scale(0.947, 0.961); }
  6% {
    transform: scale(0.967, 0.99); }
  8% {
    transform: scale(0.999, 1.034); }
  10% {
    transform: scale(1.033, 1.075); }
  12% {
    transform: scale(1.041, 1.084); }
  14% {
    transform: scale(1.068, 1.1); }
  16% {
    transform: scale(1.071, 1.1); }
  18% {
    transform: scale(1.081, 1.086); }
  20% {
    transform: scale(1.082, 1.078); }
  22% {
    transform: scale(1.079, 1.06); }
  25% {
    transform: scale(1.073, 1.044); }
  27% {
    transform: scale(1.07, 1.041); }
  30% {
    transform: scale(1.059, 1.035); }
  31% {
    transform: scale(1.057, 1.035); }
  36% {
    transform: scale(1.047, 1.044); }
  38% {
    transform: scale(1.046, 1.047); }
  42% {
    transform: scale(1.044, 1.053); }
  45% {
    transform: scale(1.045, 1.055); }
  53% {
    transform: scale(1.049, 1.051); }
  60% {
    transform: scale(1.051, 1.049); }
  75% {
    transform: scale(1.05, 1.05); }
  100% {
    transform: scale(1.05, 1.05); } }

/* stylelint-enable indentation, rule-empty-line-before, number-no-trailing-zeros */
.flex-item-fix {
  min-width: 0;
  max-width: 100%; }

.visually-hidden {
  clip: rect(0 0 0 0);
  position: absolute;
  overflow: hidden;
  margin: -0.1rem;
  padding: 0;
  width: 0.1rem;
  height: 0.1rem;
  border: 0; }

.clearfix::after {
  content: '';
  display: table;
  clear: both; }

.hidden {
  display: none !important;
  /* stylelint-disable-line declaration-no-important */ }

.text-truncate {
  display: block;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden; }

.text-truncate--inline-block {
  display: "inline-block";
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden; }

.text-no-select {
  pointer-events: none;
  user-select: none; }

.text-center {
  text-align: center; }

.text-underline {
  text-decoration: underline; }

.text-nowrap {
  white-space: nowrap; }

.text-wrap {
  white-space: normal;
  word-wrap: break-word;
  word-break: break-word; }

.line-break--tablet-up {
  display: none; }
  @media screen and (min-width: 480px) {
    .line-break--tablet-up {
      display: block; } }

.draggable--is-dragging,
.draggable--is-dragging * {
  cursor: url("https://shopify.github.io/draggable/assets/img/cursor-drag-clicked.png"), auto; }

.preload-cursors {
  clip: rect(0 0 0 0);
  position: absolute;
  overflow: hidden;
  margin: -0.1rem;
  padding: 0;
  width: 0.1rem;
  height: 0.1rem;
  border: 0; }
  .preload-cursors b {
    cursor: url("https://shopify.github.io/draggable/assets/img/cursor-drag-clicked.png"), auto; }
  .preload-cursors u {
    cursor: url("https://shopify.github.io/draggable/assets/img/cursor-pointer-clicked.png"), pointer; }
  .preload-cursors a {
    cursor: url("https://shopify.github.io/draggable/assets/img/cursor-rock-clicked.png"), pointer; }

a.SvgContainer {
  display: block;
  color: black; }

.SvgContainer .Svg {
  width: 100%;
  height: 100%;
  overflow: visible; }

.SvgContainer .Svg--heightAuto {
  height: auto; }

.Svg {
  fill: currentColor; }

.Link {
  color: #f1e2ff;
  transition: color 240ms cubic-bezier(0.64, 0, 0.35, 1); }
  .Link:focus, .Link:hover {
    color: #ca8cff; }
  .Link:active {
    color: #753fa3; }

.Link--typeDark {
  color: #ca8cff; }
  .Link--typeDark:focus, .Link--typeDark:hover {
    color: #ffff00; }
  .Link--typeDark:active {
    color: #ffa500; }

.Link--typeUnderlined {
  display: inline-block;
  font-size: 1.6rem;
  font-weight: 700;
  color: #212529;
  text-decoration: underline;
  text-decoration-line: underline;
  text-decoration-skip: ink; }
  .Link--typeUnderlined:focus, .Link--typeUnderlined:hover {
    color: #0042ff; }
  .Link--typeUnderlined:active {
    color: #0035cc; }

.Link--noWrap {
  white-space: nowrap; }

.Button {
  display: inline-block;
  padding: 0.8rem;
  font-size: 1.2rem;
  font-weight: 900;
  text-align: center;
  white-space: nowrap;
  color: #212529;
  background-color: white;
  border: 0.4rem solid #212529;
  transition: color 240ms cubic-bezier(0.64, 0, 0.35, 1), background-color 240ms cubic-bezier(0.64, 0, 0.35, 1), border-color 240ms cubic-bezier(0.64, 0, 0.35, 1); }
  @media screen and (min-width: 768px) {
    .Button {
      padding-right: 1.6rem;
      padding-left: 1.6rem;
      font-size: 1.6rem; } }
  .Button:focus, .Button:hover {
    color: #0042ff;
    border-color: #0042ff; }
  .Button:active {
    color: #0035cc;
    border-color: #0042ff; }
  .Button:disabled {
    pointer-events: none;
    color: #ebeef0;
    border-color: #ebeef0; }

.ButtonContainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-top: -0.8rem;
  margin-left: -0.8rem; }
  .ButtonContainer .Button {
    min-width: 0;
    max-width: 100%;
    display: block;
    flex: 0 0 auto;
    margin-top: 0.8rem;
    margin-left: 0.8rem; }

.Button--isActive {
  color: white;
  background-color: #212529; }
  .Button--isActive:focus, .Button--isActive:hover {
    color: white;
    background-color: #0042ff;
    border-color: #0042ff; }
  .Button--isActive:active {
    color: white;
    background-color: #0035cc;
    border-color: #0035cc; }
  .Button--isActive:disabled {
    pointer-events: none;
    color: white;
    background-color: #ebeef0;
    border-color: #ebeef0; }

.Button--typePill {
  border-radius: 2.4rem; }

.Heading {
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: currentColor; }

.Subheading {
  font-size: 2.2rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: #798c9c; }
  @media screen and (min-width: 768px) {
    .Subheading {
      font-size: 2.8rem; } }

.Heading--sizeJumbo {
  font-size: 5.6rem;
  font-weight: 700;
  line-height: 1; }
  @media screen and (min-width: 768px) {
    .Heading--sizeJumbo {
      font-size: 8.2rem; } }
  @media screen and (min-width: 1440px) {
    .Heading--sizeJumbo {
      font-size: 12rem; } }

.Heading--size1 {
  margin-bottom: 2.4rem;
  font-size: 4.2rem;
  font-weight: 700; }
  @media screen and (min-width: 768px) {
    .Heading--size1 {
      margin-bottom: 3.2rem;
      font-size: 6.4rem; } }
  @media screen and (min-width: 1440px) {
    .Heading--size1 {
      font-size: 9rem; } }

.Heading--size2 {
  font-size: 3.2rem;
  font-weight: 700; }
  @media screen and (min-width: 768px) {
    .Heading--size2 {
      font-size: 4.2rem; } }
  @media screen and (min-width: 1440px) {
    .Heading--size2 {
      font-size: 6.4rem; } }

.Heading--size3 {
  font-size: 2.4rem;
  font-weight: 700; }
  @media screen and (min-width: 768px) {
    .Heading--size3 {
      font-size: 2.8rem; } }
  @media screen and (min-width: 1440px) {
    .Heading--size3 {
      font-size: 3.2rem; } }

.Heading--size4 {
  font-size: 2rem;
  font-weight: 700; }
  @media screen and (min-width: 768px) {
    .Heading--size4 {
      font-size: 2.4rem; } }
  @media screen and (min-width: 1440px) {
    .Heading--size4 {
      font-size: 2.8rem; } }

.Heading--colorWhite {
  color: white; }

@keyframes placed {
  to {
    transform: scale(0); } }

@keyframes halftone {
  from {
    background-position: 0 0, 0.6rem 0.6rem; }
  to {
    background-position: 0.6rem 0.6rem, 1.2rem 1.2rem; } }

:root {
  --pattern-bg-color: white; }

.Pattern {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto; }

.Pattern--typeStripes {
  background-image: repeating-linear-gradient(-45deg, var(--pattern-bg-color) 0%, var(--pattern-bg-color) 40%, currentColor 40%, currentColor 50%, var(--pattern-bg-color) 50%);
  background-size: 0.8rem 0.8rem; }

.Pattern--typeHalftone {
  background-image: radial-gradient(currentColor 24%, transparent 25%), radial-gradient(currentColor 24%, transparent 25%);
  background-position: 0 0, 0.6rem 0.6rem;
  background-size: 1.2rem 1.2rem;
  animation: halftone 480ms steps(3) infinite both paused; }

.Pattern--typePlaced {
  background-color: #0042ff; }

.Main {
  padding: 9.6rem 2.4rem 4.8rem;
  min-height: 100vh;
  overflow: hidden;
  background-color: white; }
  @media screen and (min-width: 960px) {
    .Main {
      padding-top: 4.8rem;
      padding-left: 34.4rem; } }
  @media screen and (min-width: 1440px) {
    .Main {
      padding: 6.4rem 8rem 6.4rem 40rem; } }

.MainInterior {
  margin-left: auto;
  margin-right: auto;
  max-width: 144rem; }

.GridOverlay {
  --columns: 4;
  --repeating-width: calc(100% / var(--columns));
  --gutter-size: get-layout-length(gutter, mobile);
  --column-width: calc((100% / var(--columns)) - var(--gutter-size));
  --baseline-stop: calc(var(--gutter-size) - 0.1rem);
  --row-height: calc(4rem + var(--gutter-size));
  --bg-width: calc(100% + var(--gutter-size));
  --bg-baseline: repeating-linear-gradient(
    to bottom,
    get-color(purple),
    get-color(purple) $grid-overlay-baseline,
    transparent $grid-overlay-baseline,
    transparent var(--baseline-stop),
    get-color(purple) var(--baseline-stop),
    get-color(purple) var(--gutter-size),
    transparent var(--gutter-size),
    transparent var(--row-height)
  );
  --bg-columns: repeating-linear-gradient(
    to right,
    get-color(purple, light),
    get-color(purple, light) var(--column-width),
    transparent var(--column-width),
    transparent var(--repeating-width)
  );
  margin-left: auto;
  margin-right: auto;
  max-width: 144rem;
  z-index: 1;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 2.4rem;
  right: 2.4rem;
  min-height: 100vh;
  background-image: var(--bg-baseline), var(--bg-columns);
  background-size: var(--bg-width) 100%;
  background-position: 0 calc(-1 * var(--gutter-size));
  mix-blend-mode: multiply;
  opacity: 0.8;
  pointer-events: none; }
  @media screen and (min-width: 768px) {
    .GridOverlay {
      --columns: 6;
      --gutter-size: get-layout-length(gutter);
      --row-height: calc(4rem + var(--gutter-size)); } }
  @media screen and (min-width: 1440px) {
    .GridOverlay {
      --columns: 8; } }
  @media screen and (min-width: 960px) {
    .GridOverlay {
      left: 34.4rem; } }
  @media screen and (min-width: 1440px) {
    .GridOverlay {
      right: 8rem;
      left: 40rem; } }

.GridOverlay--isHidden {
  display: none; }

.PageHeader {
  margin-left: auto;
  margin-right: auto;
  max-width: 64.2rem;
  margin-bottom: 4rem;
  text-align: center;
  color: #212529; }
  @media screen and (min-width: 768px) {
    .PageHeader {
      margin-bottom: 5.6rem; } }
  @media screen and (min-width: 1440px) {
    .PageHeader {
      margin-bottom: 8rem; } }
  .PageHeader .Link {
    margin-top: 2.4rem; }
    @media screen and (min-width: 1440px) {
      .PageHeader .Link {
        margin-top: 3.2rem; } }

.DragHandle {
  position: relative;
  width: 2rem;
  height: 2rem;
  background-color: currentColor;
  transition: background-color 120ms cubic-bezier(0.64, 0, 0.35, 1); }
  .DragHandle::before, .DragHandle::after {
    content: '';
    position: absolute;
    right: 0;
    left: 0;
    display: block;
    height: 0.4rem;
    background-color: white;
    transition: background-color 120ms cubic-bezier(0.64, 0, 0.35, 1); }
  .DragHandle::before {
    top: 0.4rem; }
  .DragHandle::after {
    bottom: 0.4rem; }

.NopeHandle {
  position: relative;
  width: 2rem;
  height: 2rem;
  border: 0.4rem solid currentColor;
  border-radius: 50%;
  transition: border-color 120ms cubic-bezier(0.64, 0, 0.35, 1); }
  .NopeHandle::before {
    content: '';
    position: absolute;
    top: 0.4rem;
    left: -0.2rem;
    display: block;
    width: 1.6rem;
    height: 0.4rem;
    background-color: currentColor;
    transform: rotate(45deg); }

.Sidebar {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  z-index: 30;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch; }
  @media screen and (max-width: 959px) {
    .Sidebar {
      text-align: center;
      transition: opacity 240ms cubic-bezier(0.64, 0, 0.35, 1), visibility 240ms cubic-bezier(0.64, 0, 0.35, 1); }
      .Sidebar::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        display: block;
        height: 9.6rem;
        }
      .Sidebar[aria-hidden='undefined'] {
        display: none; }
      .Sidebar[aria-hidden='true'] {
        opacity: 0;
        visibility: hidden;
        pointer-events: none; } }
  @media screen and (min-width: 960px) {
    .Sidebar {
      position: fixed;
      right: auto;
      display: flex;
      flex-direction: column;
      width: 32rem; } }

.SidebarHeader {
  padding: 9.6rem 2.4rem 2.4rem; }
  @media screen and (min-width: 960px) {
    .SidebarHeader {
      padding-top: 4.8rem; } }
  @media screen and (min-width: 1440px) {
    .SidebarHeader {
      padding-top: 6.4rem;
      padding-right: 4rem;
      padding-left: 4rem; } }

.SidebarFooter {
  padding: 4rem 2.4rem; }
  @media screen and (min-width: 1440px) {
    .SidebarFooter {
      padding: 6.4rem 4rem; } }

.LegalText {
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.4;
  color: white; }
  .LegalText + .LegalText {
    margin-top: 1.6rem; }
  @media screen and (max-width: 959px) {
    .LegalText {
      margin-left: auto;
      margin-right: auto;
      max-width: 32rem; } }

.Navigation {
  padding: 2.4rem; }
  @media screen and (min-width: 960px) {
    .Navigation {
      flex: 1; } }
  @media screen and (min-width: 1440px) {
    .Navigation {
      padding-right: 4rem;
      padding-left: 4rem; } }

.NavList + .NavList {
  margin-top: 3.2rem; }
  @media screen and (min-width: 960px) {
    .NavList + .NavList {
      margin-top: 4.8rem; } }

.NavItem + .NavItem {
  margin-top: 1.2rem; }
  @media screen and (min-width: 960px) {
    .NavItem + .NavItem {
      margin-top: 1.6rem; } }

.NavHeading,
.NavLink {
  font-size: 3.2rem;
  letter-spacing: -0.1rem;
  line-height: 0.9; }
  @media screen and (min-width: 960px) {
    .NavHeading,
    .NavLink {
      font-size: 2.4rem; } }

.NavHeading {
  font-weight: 700;
  color: white; }
  .NavList--isCurrent .NavHeading {
    color: #ffff00; }

.NavLink {
  font-weight: 600;
  color: #798c9c; }
  .NavLink.NavLink--isCurrent {
    pointer-events: none;
    color: #ca8cff; }
  .NavLink.NavLink--isDisabled {
    pointer-events: none;
    color: #798c9c; }

a.NavLink {
  color: #c3cfd8;
  transition: color 240ms cubic-bezier(0.64, 0, 0.35, 1); }
  a.NavLink:focus, a.NavLink:hover {
    color: #ca8cff; }
  a.NavLink:active {
    color: #753fa3; }

@keyframes FadeActivator {
  to {
    opacity: 1; } }

@keyframes HamburgerBefore-In {
  0% {
    transform: translateY(0) rotate(0); }
  50% {
    transform: translateY(0.85rem) rotate(0); }
  100% {
    transform: translateY(0.85rem) rotate(45deg); } }

@keyframes HamburgerBefore-Out {
  0% {
    transform: translateY(0.85rem) rotate(45deg); }
  50% {
    transform: translateY(0.85rem) rotate(0); }
  100% {
    transform: translateY(0) rotate(0); } }

@keyframes HamburgerAfter-In {
  0% {
    transform: translateY(1.7rem) rotate(0); }
  50% {
    transform: translateY(0.85rem) rotate(0); }
  100% {
    transform: translateY(0.85rem) rotate(-45deg); } }

@keyframes HamburgerAfter-Out {
  0% {
    transform: translateY(0.85rem) rotate(-45deg); }
  50% {
    transform: translateY(0.85rem) rotate(0); }
  100% {
    transform: translateY(1.7rem) rotate(0); } }

@keyframes HamburgerPatty-In {
  0%,
  25% {
    opacity: 1; }
  50%,
  100% {
    opacity: 0; } }

@keyframes HamburgerPatty-Out {
  0%,
  25% {
    opacity: 0; }
  50%,
  100% {
    opacity: 1; } }

.Hamburger {
  z-index: 40;
  position: absolute;
  top: 3.2rem;
  left: 50%;
  margin-left: -2rem;
  padding: 0.8rem;
  opacity: 0;
  animation: FadeActivator 480ms cubic-bezier(0.64, 0, 0.35, 1) forwards; }
  @media only screen and (min-width: 960px) {
    .Hamburger {
      clip: rect(0 0 0 0);
      position: absolute;
      overflow: hidden;
      margin: -0.1rem;
      padding: 0;
      width: 0.1rem;
      height: 0.1rem;
      border: 0; } }
  .Hamburger[aria-expanded='true'] .HamburgerBun::before,
  .Hamburger[aria-expanded='true'] .HamburgerBun::after {
    background-color: white; }
  .Hamburger[aria-expanded='true'] .HamburgerBun::before {
    animation-name: HamburgerBefore-In; }
  .Hamburger[aria-expanded='true'] .HamburgerBun::after {
    animation-name: HamburgerAfter-In; }
  .Hamburger[aria-expanded='true'] .HamburgerPatty {
    animation-name: HamburgerPatty-In; }

.HamburgerBun {
  position: relative;
  width: 2.4rem;
  height: 2rem; }
  .HamburgerBun::before, .HamburgerBun::after {
    content: '';
    top: 0;
    display: block;
    transition: background-color 240ms cubic-bezier(0.64, 0, 0.35, 1); }
  .HamburgerBun::before, .HamburgerBun::after,
  .HamburgerBun .HamburgerPatty {
    position: absolute;
    left: 0;
    width: 100%;
    height: 0.3rem;
    border-radius: 0.3rem;
    background-color: #212529;
    animation-duration: 240ms;
    animation-timing-function: cubic-bezier(0.64, 0, 0.35, 1);
    animation-fill-mode: both; }
  .HamburgerBun::before {
    transform: translateY(0) rotate(0);
    animation-name: HamburgerBefore-Out; }
  .HamburgerBun::after {
    transform: translateY(1.7rem) rotate(0);
    animation-name: HamburgerAfter-Out; }

.HamburgerPatty {
  top: 0.85rem;
  animation-name: HamburgerPatty-Out; }

@keyframes logo-outline-bounce {
  25% {
    transform: translate(-0.1rem, 0.1rem); }
  75% {
    transform: translate(0.1rem, -0.1rem); } }

@keyframes logo-rainbow-mask {
  0% {
    fill: #212529; }
  25% {
    fill: #800080; }
  50% {
    fill: #ff0000; }
  75% {
    fill: #ffa500; } }

@keyframes logo-rainbow-purple {
  0% {
    fill: #800080; }
  25% {
    fill: #ff0000; }
  50% {
    fill: #ffa500; }
  75% {
    fill: #212529; } }

@keyframes logo-rainbow-red {
  0% {
    fill: #ff0000; }
  25% {
    fill: #ffa500; }
  50% {
    fill: #212529; }
  75% {
    fill: #800080; } }

@keyframes logo-rainbow-orange {
  0% {
    fill: #ffa500; }
  25% {
    fill: #212529; }
  50% {
    fill: #800080; }
  75% {
    fill: #ff0000; } }

.Brand {
  cursor: url("https://shopify.github.io/draggable/assets/img/cursor-rock.png"), pointer;
  display: flex; }
  .Brand:active {
    cursor: url("https://shopify.github.io/draggable/assets/img/cursor-rock-clicked.png"), pointer; }
  @media screen and (max-width: 959px) {
    .Brand {
      justify-content: center; } }
  @media screen and (min-width: 1440px) {
    .Brand {
      margin-left: -0.8rem; } }

.BrandLogo {
  flex: 0 0 4.6rem; }

.BrandWordmark {
  flex: 0 0 17.6rem;
  margin-left: 1.6rem; }

.Svg--srcWordmark {
  fill: #ffff00; }

.Wave--colorMask {
  fill: #212529; }

.Wave--colorPurple {
  fill: #800080; }

.Wave--colorRed {
  fill: #ff0000; }

.Wave--colorOrange {
  fill: #ffa500; }

.Hand {
  fill: #ffff00; }

.Brand:hover .Wave--colorMask {
  animation: logo-rainbow-mask 480ms cubic-bezier(0.64, 0, 0.35, 1) infinite; }

.Brand:hover .Wave--colorPurple {
  animation: logo-rainbow-purple 480ms cubic-bezier(0.64, 0, 0.35, 1) infinite; }

.Brand:hover .Wave--colorRed {
  animation: logo-rainbow-red 480ms cubic-bezier(0.64, 0, 0.35, 1) infinite; }

.Brand:hover .Wave--colorOrange {
  animation: logo-rainbow-orange 480ms cubic-bezier(0.64, 0, 0.35, 1) infinite; }

.Brand:hover .Hand {
  animation: logo-outline-bounce 480ms linear infinite; }

.Brand:active .Wave--colorMask,
.Brand:active .Wave--colorPurple,
.Brand:active .Wave--colorRed,
.Brand:active .Wave--colorOrange,
.Brand:active .Hand {
  animation-duration: 240ms; }

.BlockWrapper .Block {
  height: 100%; }

.Block {
  position: relative;
  display: block; }

.BlockContent {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  position: relative;
  min-height: 8.6rem;
  height: 100%;
  color: white;
  background-color: #212529;
  border: 0.6rem solid #212529; }
  @media screen and (min-width: 768px) {
    .BlockContent {
      min-height: 8.8rem;
      border-width: 0.8rem; } }
  .BlockContent .Heading {
    margin-top: -0.1em; }

.BlockLayout--typeFlex,
.BlockLayout--typeFloat {
  margin-top: -0.6rem;
  margin-left: -0.6rem; }
  .BlockLayout--typeFlex > .BlockWrapper,
  .BlockLayout--typeFloat > .BlockWrapper {
    margin-top: 0.6rem;
    margin-left: 0.6rem; }
  .BlockLayout--typeFlex > .Block,
  .BlockLayout--typeFloat > .Block {
    padding-top: 0.6rem;
    padding-left: 0.6rem; }
  @media screen and (min-width: 768px) {
    .BlockLayout--typeFlex,
    .BlockLayout--typeFloat {
      margin-top: -0.8rem;
      margin-left: -0.8rem; }
      .BlockLayout--typeFlex > .BlockWrapper,
      .BlockLayout--typeFloat > .BlockWrapper {
        margin-top: 0.8rem;
        margin-left: 0.8rem; }
      .BlockLayout--typeFlex > .Block,
      .BlockLayout--typeFloat > .Block {
        padding-top: 0.8rem;
        padding-left: 0.8rem; } }

.BlockLayout--typeFlex {
  display: flex;
  flex-wrap: wrap; }
  .BlockLayout--typeFlex .Block {
    flex: 1 1 100%; }

.BlockLayout--typeFloat::after {
  content: '';
  display: table;
  clear: both; }

.BlockLayout--typeFloat .Block {
  float: left;
  width: 100%; }

.BlockLayout--typeGrid {
  display: grid;
  grid-gap: 0.6rem; }
  @media screen and (min-width: 768px) {
    .BlockLayout--typeGrid {
      grid-gap: 0.8rem; } }

.BlockLayout--typePositioned {
  position: relative; }

.Block--typeShell .BlockContent {
  color: #212529;
  background-color: white;
  border-color: currentColor; }

.Block--typeHollow .BlockContent {
  color: #c3cfd8;
  background-color: white;
  border-color: currentColor; }

.Block--typeStripes .BlockContent {
  background-image: repeating-linear-gradient(-45deg, var(--pattern-bg-color) 0%, var(--pattern-bg-color) 40%, currentColor 40%, currentColor 50%, var(--pattern-bg-color) 50%);
  background-size: 0.8rem 0.8rem;
  color: #212529;
  border-color: currentColor;
  transition: color 120ms cubic-bezier(0.64, 0, 0.35, 1); }

.Block--isDraggable {
  cursor: url("https://shopify.github.io/draggable/assets/img/cursor-drag.png"), auto; }
  .Block--isDraggable .BlockContent {
    color: #212529;
    background-color: white;
    border-color: currentColor;
    transition: color 120ms cubic-bezier(0.64, 0, 0.35, 1), background-color 120ms cubic-bezier(0.64, 0, 0.35, 1), transform 240ms cubic-bezier(0.32, 1.46, 0.54, 1.28); }
  .Block--isDraggable:focus .BlockContent,
  .Block--isDraggable:hover .BlockContent {
    color: #0042ff; }
  .Block--isDraggable.draggable-source--is-dragging .BlockContent {
    color: #0042ff; }
    .Block--isDraggable.draggable-source--is-dragging .BlockContent .Pattern--typeHalftone {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      animation-play-state: running; }
  .Block--isDraggable.draggable-source--placed .BlockContent .Pattern--typePlaced {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    animation: placed 240ms cubic-bezier(0.64, 0, 0.35, 1) both; }
  .Block--isDraggable.draggable-mirror {
    z-index: 9999; }
    .Block--isDraggable.draggable-mirror .BlockContent {
      color: white;
      background-color: #0042ff;
      border-color: #0042ff;
      transform: scale(1.025); }

.BlockWrapper {
  position: relative; }
  .BlockWrapper.draggable-dropzone--occupied .Block--typeHollow,
  .BlockWrapper.draggable-dropzone--occupied .Block--typeStripes {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto; }

.Block--typeStripes.isColliding .BlockContent {
  color: #ff0000; }

.PaperStack {
  position: relative;
  margin-right: auto;
  margin-left: auto;
  width: 24rem;
  height: 33.2rem; }
  @media screen and (min-width: 768px) {
    .PaperStack {
      width: 42rem;
      height: 52rem; } }
  @media screen and (min-width: 1920px) {
    .PaperStack {
      width: 60rem;
      height: 70.8rem; } }

.PaperStackItem {
  position: absolute;
  left: 0;
  right: 0;
  height: 0; }

.PaperStackContent {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  position: relative;
  width: 100%;
  height: 38rem;
  color: white;
  background-color: #212529;
  border: 0.8rem solid #212529;
  border-top-width: 1.6rem;
  transform: perspective(90rem) rotateX(60deg);
  backface-visibility: hidden; }
  @media screen and (min-width: 768px) {
    .PaperStackContent {
      height: 58rem; } }
  @media screen and (min-width: 1920px) {
    .PaperStackContent {
      height: 78rem; } }

.PaperStackHeading {
  margin-top: 0.5em;
  font-size: 7.2rem;
  font-weight: 700;
  line-height: 1; }
  @media screen and (min-width: 768px) {
    .PaperStackHeading {
      font-size: 12rem; } }
  @media screen and (min-width: 1920px) {
    .PaperStackHeading {
      font-size: 16rem; } }

.PaperStackItem:nth-child(1n+2) .PaperStackContent::after {
  content: '';
  position: absolute;
  right: -0.8rem;
  bottom: 1.6rem;
  left: -0.8rem;
  display: block;
  height: 3.2rem;
  background-color: #212529;
  transition: transform 240ms cubic-bezier(0.64, 0, 0.35, 1); }
  @media screen and (min-width: 768px) {
    .PaperStackItem:nth-child(1n+2) .PaperStackContent::after {
      bottom: 2rem;
      height: 4rem; } }
  @media screen and (min-width: 1920px) {
    .PaperStackItem:nth-child(1n+2) .PaperStackContent::after {
      bottom: 1.6rem;
      height: 4.8rem; } }

.PaperStackItem:nth-child(1) {
  z-index: 4; }

.PaperStackItem:nth-child(2) {
  z-index: 3; }

.PaperStackItem:nth-child(3) {
  z-index: 2; }

.PaperStackItem:nth-child(4) {
  z-index: 1; }

.PaperStackItem:nth-child(1),
.PaperStackItem.draggable--original ~ .PaperStackItem:nth-child(2) {
  top: -7.6rem; }

.PaperStackItem:nth-child(2),
.PaperStackItem.draggable--original ~ .PaperStackItem:nth-child(3) {
  top: -4.4rem; }

.PaperStackItem:nth-child(3),
.PaperStackItem.draggable--original ~ .PaperStackItem:nth-child(4) {
  top: -1.2rem; }

.PaperStackItem:nth-child(4),
.PaperStackItem.draggable--original ~ .PaperStackItem:nth-child(5) {
  top: 2rem; }

@media screen and (min-width: 768px) {
  .PaperStackItem:nth-child(1),
  .PaperStackItem.draggable--original ~ .PaperStackItem:nth-child(2) {
    top: -12.5rem; }
  .PaperStackItem:nth-child(2),
  .PaperStackItem.draggable--original ~ .PaperStackItem:nth-child(3) {
    top: -8.5rem; }
  .PaperStackItem:nth-child(3),
  .PaperStackItem.draggable--original ~ .PaperStackItem:nth-child(4) {
    top: -4.5rem; }
  .PaperStackItem:nth-child(4),
  .PaperStackItem.draggable--original ~ .PaperStackItem:nth-child(5) {
    top: -0.5rem; } }

@media screen and (min-width: 1920px) {
  .PaperStackItem:nth-child(1),
  .PaperStackItem.draggable--original ~ .PaperStackItem:nth-child(2) {
    top: -17.4rem; }
  .PaperStackItem:nth-child(2),
  .PaperStackItem.draggable--original ~ .PaperStackItem:nth-child(3) {
    top: -12.6rem; }
  .PaperStackItem:nth-child(3),
  .PaperStackItem.draggable--original ~ .PaperStackItem:nth-child(4) {
    top: -7.8rem; }
  .PaperStackItem:nth-child(4),
  .PaperStackItem.draggable--original ~ .PaperStackItem:nth-child(5) {
    top: -3rem; } }

.draggable--original:first-child + .PaperStackItem .PaperStackContent::after {
  content: none; }

.PaperStackItem--isDraggable {
  cursor: url("https://shopify.github.io/draggable/assets/img/cursor-drag.png"), auto; }
  .PaperStackItem--isDraggable .PaperStackContent {
    color: #212529;
    background-color: white;
    border-color: currentColor;
    transition: color 120ms cubic-bezier(0.64, 0, 0.35, 1), background-color 120ms cubic-bezier(0.64, 0, 0.35, 1), transform 240ms cubic-bezier(0.64, 0, 0.35, 1); }
  .PaperStackItem--isDraggable:focus .PaperStackContent, .PaperStackItem--isDraggable:hover .PaperStackContent {
    color: #0042ff;
    transform: perspective(90rem) rotateX(60deg) translateY(0.8rem); }
    .PaperStackItem--isDraggable:focus .PaperStackContent::after, .PaperStackItem--isDraggable:hover .PaperStackContent::after {
      transform: translateY(-0.8rem); }
  .PaperStackItem--isDraggable.draggable-source--is-dragging .PaperStackContent {
    color: #0042ff; }
    .PaperStackItem--isDraggable.draggable-source--is-dragging .PaperStackContent .Pattern--typeHalftone {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      animation-play-state: running; }
  .PaperStackItem--isDraggable.draggable-source--placed .PaperStackContent .Pattern--typePlaced {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    animation: placed 240ms cubic-bezier(0.64, 0, 0.35, 1) both; }
  .PaperStackItem--isDraggable.draggable-mirror {
    z-index: 9999; }
    .PaperStackItem--isDraggable.draggable-mirror .PaperStackContent {
      color: white;
      background-color: #0042ff;
      border-color: #0042ff;
      transform: perspective(90rem) rotateX(58deg) scale(1.025); }
      .PaperStackItem--isDraggable.draggable-mirror .PaperStackContent::after {
        content: none; }

.PillSwitch {
  position: relative;
  margin-right: auto;
  margin-left: auto;
  width: 27.2rem;
  height: 27.2rem; }
  @media screen and (min-width: 768px) {
    .PillSwitch {
      width: 54.8rem;
      height: 54.8rem; } }

.PillSwitchTrack {
  margin-top: -6.5rem;
  margin-left: -16.25rem;
  width: 32.5rem;
  height: 13rem;
  border-radius: 6.5rem;
  box-shadow: inset 0 0 0 0.8rem #0042ff;
  position: absolute;
  top: 50%;
  left: 50%;
  color: #0042ff;
  background-color: white;
  transform: rotate(-45deg);
  overflow: hidden; }
  .PillSwitchTrack::after {
    content: '';
    position: absolute;
    top: -0.8rem;
    right: -0.8rem;
    bottom: -0.8rem;
    left: -0.8rem;
    display: block;
    background-color: #212529;
    transition: opacity 120ms cubic-bezier(0.64, 0, 0.35, 1); }
  @media screen and (min-width: 768px) {
    .PillSwitchTrack {
      margin-top: -16rem;
      margin-left: -32rem;
      width: 64rem;
      height: 32rem;
      border-radius: 16rem;
      box-shadow: inset 0 0 0 1.6rem #0042ff; } }
  .PillSwitchTrack .Pattern--typeHalftone {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    animation-play-state: running;
    height: 27.2rem;
    transform: rotate(45deg); }
    @media screen and (min-width: 768px) {
      .PillSwitchTrack .Pattern--typeHalftone {
        height: 54.8rem; } }

.PillSwitchControl {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 13rem;
  height: 13rem;
  color: #212529;
  background-color: white;
  border: 0.8rem solid currentColor;
  border-radius: 50%;
  transition: color 120ms cubic-bezier(0.64, 0, 0.35, 1); }
  @media screen and (min-width: 768px) {
    .PillSwitchControl {
      width: 32rem;
      height: 32rem;
      border-width: 1.6rem; } }
  .PillSwitchControl .Heading {
    margin-top: -0.1em;
    margin-left: -0.05em; }
  .PillSwitchControl:focus, .PillSwitchControl:hover, .PillSwitchControl.draggable-mirror {
    color: #0042ff; }
  .PillSwitchControl:active {
    color: #0035cc; }
  .PillSwitchControl.draggable-source--is-dragging {
    opacity: 0;
    visibility: hidden;
    pointer-events: none; }

.PillSwitch--isOn .PillSwitchTrack::after {
  opacity: 0; }

.PillSwitch--isOn .PillSwitchControl {
  top: 0;
  right: 0;
  bottom: auto;
  left: auto;
  color: white;
  background-color: #0042ff;
  border-color: #0042ff; }
  .PillSwitch--isOn .PillSwitchControl:focus, .PillSwitch--isOn .PillSwitchControl:hover, .PillSwitch--isOn .PillSwitchControl.draggable-mirror {
    color: #0042ff;
    background-color: white; }
  .PillSwitch--isOn .PillSwitchControl:active {
    color: #0035cc; }

@keyframes plate-small {
  0%,
  100% {
    transform: scale(1, 1); }
  10% {
    transform: scale(1.1, 0.96); }
  25% {
    transform: scale(0.925, 1.075); }
  50% {
    transform: scale(1.0125, 0.975); }
  75% {
    transform: scale(0.975, 1.0125); }
  95% {
    transform: scale(1.005, 0.995); } }

@keyframes plate-medium {
  0%,
  100% {
    transform: scale(1, 1); }
  10% {
    transform: scale(1.15, 0.95); }
  25% {
    transform: scale(0.9, 1.1); }
  50% {
    transform: scale(1.025, 0.96); }
  75% {
    transform: scale(0.98, 1.025); }
  95% {
    transform: scale(1.01, 0.985); } }

@keyframes plate-big {
  0%,
  100% {
    transform: scale(1, 1); }
  10% {
    transform: scale(1.2, 0.9); }
  25% {
    transform: scale(0.85, 1.15); }
  50% {
    transform: scale(1.075, 0.95); }
  75% {
    transform: scale(0.975, 1.05); }
  95% {
    transform: scale(1.0125, 0.98); } }

@keyframes plate-placed {
  0%,
  100% {
    color: #212529; }
  50% {
    color: #0042ff; } }

.PlateWrapper {
  margin-left: auto;
  margin-right: auto;
  max-width: 80rem;
  position: relative;
  padding-top: 100%;
  height: 0; }
  @media screen and (min-width: 1280px) {
    .PlateWrapper {
      padding-top: 0;
      height: 80rem; } }

.Plate {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  height: 0;
  color: white;
  border-radius: 50%; }

.PlateShadowWrapper {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  pointer-events: none; }

.PlateShadow {
  width: 100%;
  height: 100%; }
  .PlateShadow::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background-color: #212529;
    border-radius: 50%; }

.PlateContent {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  background-color: #212529;
  border-radius: 50%; }
  .PlateContent .Heading {
    margin-bottom: 0; }

.Plate--levelBottom {
  padding-top: 100%;
  width: 100%; }
  .Plate--levelBottom .PlateShadow {
    transform: rotate(55deg); }

.Plate--levelMiddle {
  padding-top: 75%;
  width: 75%; }
  .Plate--levelMiddle .PlateShadow {
    transform: rotate(45deg); }

.Plate--levelTop {
  padding-top: 50%;
  width: 50%; }
  .Plate--levelTop .PlateShadow {
    transform: rotate(35deg); }

.PlateWrapper {
  --shadow-offset-x: 0;
  --shadow-offset-y: 0;
  --plate-scale-x: 1;
  --plate-scale-y: 1;
  --bottom-translate-x: 0;
  --bottom-translate-y: 0;
  --middle-translate-x: 0;
  --middle-translate-y: 0;
  --top-translate-x: 0;
  --top-translate-y: 0; }
  .PlateWrapper.draggable-container--placed .Plate--levelBottom,
  .PlateWrapper.draggable-container--placed .Plate--levelMiddle,
  .PlateWrapper.draggable-container--placed .Plate--levelTop {
    animation-name: plate-placed;
    animation-duration: 240ms;
    animation-timing-function: cubic-bezier(0.64, 0, 0.35, 1); }
  .PlateWrapper.draggable-container--placed .Plate--levelBottom {
    animation-delay: 120ms; }
  .PlateWrapper.draggable-container--placed .Plate--levelMiddle {
    animation-delay: 60ms; }

.Plate--isDraggable {
  color: #212529;
  transition: color 120ms cubic-bezier(0.64, 0, 0.35, 1); }
  .Plate--isDraggable:focus, .Plate--isDraggable:hover {
    color: #0042ff; }
  .Plate--isDraggable .PlateShadowWrapper {
    transform: translate3d(var(--shadow-offset-x), var(--shadow-offset-y), 0); }
  .Plate--isDraggable .PlateShadow::before {
    background-color: currentColor;
    animation-duration: 480ms;
    animation-timing-function: cubic-bezier(0.64, 0, 0.35, 1); }
  .Plate--isDraggable .PlateContent {
    background-color: white;
    border: 2.5vw solid currentColor;
    animation-duration: 480ms;
    animation-timing-function: cubic-bezier(0.64, 0, 0.35, 1); }
    @media screen and (min-width: 960px) {
      .Plate--isDraggable .PlateContent {
        border-width: 1.6rem; } }
  .Plate--isDraggable.Plate--levelBottom {
    transform: translate3d(var(--bottom-translate-x), var(--bottom-translate-y), 0) scale(var(--plate-scale-x), var(--plate-scale-y)); }
    .Plate--isDraggable.Plate--levelBottom:focus .PlateContent,
    .Plate--isDraggable.Plate--levelBottom:focus .PlateShadow::before, .Plate--isDraggable.Plate--levelBottom:hover .PlateContent,
    .Plate--isDraggable.Plate--levelBottom:hover .PlateShadow::before {
      animation-name: plate-small; }
  .Plate--isDraggable.Plate--levelMiddle {
    transform: translate3d(var(--middle-translate-x), var(--middle-translate-y), 0) scale(var(--plate-scale-x), var(--plate-scale-y)); }
    .Plate--isDraggable.Plate--levelMiddle:focus .PlateContent,
    .Plate--isDraggable.Plate--levelMiddle:focus .PlateShadow::before, .Plate--isDraggable.Plate--levelMiddle:hover .PlateContent,
    .Plate--isDraggable.Plate--levelMiddle:hover .PlateShadow::before {
      animation-name: plate-medium; }
  .Plate--isDraggable.Plate--levelTop {
    transform: translate3d(var(--top-translate-x), var(--top-translate-y), 0) scale(var(--plate-scale-x), var(--plate-scale-y)); }
    .Plate--isDraggable.Plate--levelTop:focus .PlateContent,
    .Plate--isDraggable.Plate--levelTop:focus .PlateShadow::before, .Plate--isDraggable.Plate--levelTop:hover .PlateContent,
    .Plate--isDraggable.Plate--levelTop:hover .PlateShadow::before {
      animation-name: plate-big; }
  .Plate--isDraggable.draggable-mirror {
    display: none; }

.draggable-container--placed .Plate--levelBottom .PlateContent,
.draggable-container--placed .Plate--levelBottom .PlateShadow::before {
  animation-name: plate-small; }

.draggable-container--placed .Plate--levelMiddle .PlateContent,
.draggable-container--placed .Plate--levelMiddle .PlateShadow::before {
  animation-name: plate-medium; }

.draggable-container--placed .Plate--levelTop .PlateContent,
.draggable-container--placed .Plate--levelTop .PlateShadow::before {
  animation-name: plate-big; }

.StackedListWrapper {
  background-image: repeating-linear-gradient(-45deg, var(--pattern-bg-color) 0%, var(--pattern-bg-color) 40%, currentColor 40%, currentColor 50%, var(--pattern-bg-color) 50%);
  background-size: 0.8rem 0.8rem;
  position: relative;
  color: #212529;
  box-shadow: inset 0 0 0 0.6rem currentColor; }
  @media screen and (min-width: 768px) {
    .StackedListWrapper {
      box-shadow: inset 0 0 0 0.8rem currentColor; } }

.StackedListHeader,
.StackedListContent { }
  @media screen and (min-width: 1440px) {
    .StackedListHeader,
    .StackedListContent { } }

.StackedListHeader {
  padding: 2.2rem;
  background-color: currentColor;
  transition: color 120ms cubic-bezier(0.64, 0, 0.35, 1); }
  @media screen and (min-width: 768px) {
    .StackedListHeader {
      padding: 2.4rem; } }
  .StackedListHeader p {
    margin-top: 0.2em;
    font-size: 2rem;
    color: white; }
    @media screen and (min-width: 768px) {
      .StackedListHeader p {
        font-size: 2.4rem; } }
    @media screen and (min-width: 1440px) {
      .StackedListHeader p {
        font-size: 2.8rem; } }

.StackedList {
  position: relative;
  margin-top: -0.6rem; }
  @media screen and (min-width: 768px) {
    .StackedList {
      margin-top: -0.8rem; } }
  .StackedList::before {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: currentColor;
    font-size: 2rem;
    font-weight: 700;
    pointer-events: none;
    user-select: none;
    content: 'drop items here';
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 80%;
    height: 80%;
    background-color: white;
    transition: opacity 240ms cubic-bezier(0.64, 0, 0.35, 1), visibility 240ms cubic-bezier(0.64, 0, 0.35, 1); }
    @media screen and (min-width: 768px) {
      .StackedList::before {
        font-size: 2.4rem; } }
    @media screen and (min-width: 1440px) {
      .StackedList::before {
        font-size: 2.8rem; } }
  .StackedList:empty::before {
    opacity: 1;
    visibility: visible;
    pointer-events: auto; }

.StackedListItem {
  cursor: url("https://shopify.github.io/draggable/assets/img/cursor-auto.png"), auto; }
  .StackedListItem:nth-child(1n+2) {
    margin-top: -0.6rem; }
    @media screen and (min-width: 768px) {
      .StackedListItem:nth-child(1n+2) {
        margin-top: -0.8rem; } }
  .draggable--original:first-child + .StackedListItem {
    margin-top: 0; }

.StackedListContent {
  position: relative;
  display: flex;
  align-items: center;
  padding: 1.6rem;
  color: currentColor;
  background-color: #fafbfc;
  border: 0.6rem solid currentColor;
  transition: color 120ms cubic-bezier(0.64, 0, 0.35, 1), background-color 120ms cubic-bezier(0.64, 0, 0.35, 1), transform 240ms cubic-bezier(0.32, 1.46, 0.54, 1.28); }
  @media screen and (min-width: 768px) {
    .StackedListContent {
      border-width: 0.8rem; } }
  .StackedListContent .Heading {
    flex: 1 1 auto; }
  .StackedListContent .DragHandle,
  .StackedListContent .NopeHandle {
    flex: 0 0 2rem;
    margin-left: 2.4rem; }
  .StackedListContent::before {
    content: '';
    position: absolute;
    top: -0.6rem;
    right: -0.6rem;
    left: -0.6rem;
    display: block;
    height: 0.6rem;
    background-color: currentColor;
    opacity: 0;
    transition: color 120ms cubic-bezier(0.64, 0, 0.35, 1), opacity 120ms cubic-bezier(0.64, 0, 0.35, 1); }
    @media screen and (min-width: 768px) {
      .StackedListContent::before {
        top: -0.8rem;
        right: -0.8rem;
        left: -0.8rem;
        height: 0.8rem; } }

.StackedListWrapper--sizeMedium .StackedListHeader,
.StackedListWrapper--sizeMedium .StackedListContent {
  height: 10rem; }
  @media screen and (min-width: 1440px) {
    .StackedListWrapper--sizeMedium .StackedListHeader,
    .StackedListWrapper--sizeMedium .StackedListContent {
      height: 16.4rem; } }

.StackedListWrapper--sizeLarge .StackedListHeader,
.StackedListWrapper--sizeLarge .StackedListContent {
  height: 14.4rem; }
  @media screen and (min-width: 1440px) {
    .StackedListWrapper--sizeLarge .StackedListHeader,
    .StackedListWrapper--sizeLarge .StackedListContent {
      height: 20.6rem; } }

.StackedListWrapper--hasScrollIndicator::after {
  content: '';
  position: absolute;
  display: block;
  background-color: currentColor;
  transition: color 120ms cubic-bezier(0.64, 0, 0.35, 1), opacity 240ms cubic-bezier(0.64, 0, 0.35, 1);
  right: 0;
  bottom: 0;
  left: 0;
  height: 0.6rem; }
  @media screen and (min-width: 768px) {
    .StackedListWrapper--hasScrollIndicator::after {
      height: 0.8rem; } }

.StackedListWrapper--hasScrollIndicator:hover::after {
  opacity: 0.1; }

.StackedList--hasScroll {
  height: 40.2rem;
  overflow-y: scroll; }
  @media screen and (min-width: 1440px) {
    .StackedList--hasScroll {
      height: 55.4rem; } }
  .StackedListWrapper--sizeMedium .StackedList--hasScroll {
    height: 28.8rem; }
    @media screen and (min-width: 1440px) {
      .StackedListWrapper--sizeMedium .StackedList--hasScroll {
        height: 47.6rem; } }
  .StackedListWrapper--sizeLarge .StackedList--hasScroll {
    height: 42rem; }
    @media screen and (min-width: 1440px) {
      .StackedListWrapper--sizeLarge .StackedList--hasScroll {
        height: 60.2rem; } }

.StackedListWrapper--axisHorizontal {
  display: flex; }
  .StackedListWrapper--axisHorizontal::after {
    content: '';
    position: absolute;
    display: block;
    background-color: currentColor;
    transition: color 120ms cubic-bezier(0.64, 0, 0.35, 1), opacity 240ms cubic-bezier(0.64, 0, 0.35, 1);
    top: 0;
    right: 0;
    bottom: 0;
    width: 0.6rem; }
    @media screen and (min-width: 768px) {
      .StackedListWrapper--axisHorizontal::after {
        width: 0.8rem; } }
  .StackedListWrapper--axisHorizontal:hover::after {
    opacity: 0.1; }
  .StackedListWrapper--axisHorizontal .StackedListHeader,
  .StackedListWrapper--axisHorizontal .StackedListContent {
    height: 7.2rem; }
    @media screen and (min-width: 768px) {
      .StackedListWrapper--axisHorizontal .StackedListHeader,
      .StackedListWrapper--axisHorizontal .StackedListContent {
        height: 8.6rem; } }
  .StackedListWrapper--axisHorizontal .StackedListHeader {
    flex: 0 0 14.4rem; }
    @media screen and (min-width: 768px) {
      .StackedListWrapper--axisHorizontal .StackedListHeader {
        flex-basis: 20.6rem; } }
  .StackedListWrapper--axisHorizontal .StackedList {
    display: flex;
    flex: 1 1 auto;
    margin-top: 0;
    margin-left: -0.6rem;
    overflow-x: scroll; }
    @media screen and (min-width: 768px) {
      .StackedListWrapper--axisHorizontal .StackedList {
        margin-left: -0.8rem; } }
  .StackedListWrapper--axisHorizontal .StackedListItem {
    flex: 1 0 14.4rem;
    max-width: 28.8rem; }
    .StackedListWrapper--axisHorizontal .StackedListItem:nth-child(1n + 2) {
      margin-top: 0;
      margin-left: -0.6rem; }
      @media screen and (min-width: 768px) {
        .StackedListWrapper--axisHorizontal .StackedListItem:nth-child(1n + 2) {
          margin-left: -0.8rem; } }
    @media screen and (min-width: 768px) {
      .StackedListWrapper--axisHorizontal .StackedListItem {
        flex-basis: 20.6rem;
        max-width: 41.2rem; } }
  .StackedListWrapper--axisHorizontal .draggable--original:first-child + .StackedListItem {
    margin-left: 0; }
  .StackedListWrapper--axisHorizontal .StackedListContent {
    flex-direction: column;
    justify-content: center;
    text-align: center; }
    .StackedListWrapper--axisHorizontal .StackedListContent::before {
      top: -0.6rem;
      right: auto;
      bottom: -0.6rem;
      left: -0.6rem;
      width: 0.6rem;
      height: auto; }
      @media screen and (min-width: 768px) {
        .StackedListWrapper--axisHorizontal .StackedListContent::before {
          top: -0.8rem;
          bottom: -0.8rem;
          left: -0.8rem;
          width: 0.8rem; } }
  .StackedListWrapper--axisHorizontal .DragHandle,
  .StackedListWrapper--axisHorizontal .NopeHandle {
    margin-left: 0; }
  .StackedListWrapper--axisHorizontal.StackedListWrapper--sizeMedium .StackedListHeader,
  .StackedListWrapper--axisHorizontal.StackedListWrapper--sizeMedium .StackedListContent {
    height: 10rem; }
    @media screen and (min-width: 768px) {
      .StackedListWrapper--axisHorizontal.StackedListWrapper--sizeMedium .StackedListHeader,
      .StackedListWrapper--axisHorizontal.StackedListWrapper--sizeMedium .StackedListContent {
        height: 16.4rem; } }
  .StackedListWrapper--axisHorizontal.StackedListWrapper--sizeLarge .StackedListHeader,
  .StackedListWrapper--axisHorizontal.StackedListWrapper--sizeLarge .StackedListContent {
    height: 14.4rem; }
    @media screen and (min-width: 768px) {
      .StackedListWrapper--axisHorizontal.StackedListWrapper--sizeLarge .StackedListHeader,
      .StackedListWrapper--axisHorizontal.StackedListWrapper--sizeLarge .StackedListContent {
        height: 20.6rem; } }

.StackedListItem--isDraggable {
  cursor: url("https://shopify.github.io/draggable/assets/img/cursor-drag.png"), auto; }
  .StackedListItem--isDraggable .StackedListContent {
    background-color: white; }
  .StackedListItem--isDraggable:focus {
    outline: none; }
  .StackedListItem--isDraggable:focus .StackedListContent, .StackedListItem--isDraggable:hover .StackedListContent {
    color: #0042ff; }
  .StackedListItem--isDraggable:focus + .StackedListItem .StackedListContent::before, .StackedListItem--isDraggable:hover + .StackedListItem .StackedListContent::before {
    background-color: #0042ff;
    opacity: 1; }
  .StackedListItem--isDraggable.draggable-source--is-dragging .StackedListContent {
    color: #0042ff; }
    .StackedListItem--isDraggable.draggable-source--is-dragging .StackedListContent .Pattern--typeHalftone {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      animation-play-state: running; }
  .StackedListItem--isDraggable.draggable-source--is-dragging + .StackedListItem .StackedListContent::before,
  .StackedListItem--isDraggable.draggable-source--is-dragging + .draggable--original + .StackedListItem .StackedListContent::before {
    background-color: #0042ff;
    opacity: 1; }
  .StackedListItem--isDraggable.draggable-source--placed .StackedListContent .Pattern--typePlaced {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    animation: placed 240ms cubic-bezier(0.64, 0, 0.35, 1) both; }
  .StackedListItem--isDraggable.draggable-mirror {
    z-index: 9999; }
    .StackedListItem--isDraggable.draggable-mirror .StackedListContent {
      color: white;
      background-color: #0042ff;
      border-color: #0042ff;
      transform: scale(1.025); }
      .StackedListItem--isDraggable.draggable-mirror .StackedListContent::before, .StackedListItem--isDraggable.draggable-mirror .StackedListContent::after {
        display: none; }
    .StackedListItem--isDraggable.draggable-mirror .DragHandle {
      background-color: white; }
      .StackedListItem--isDraggable.draggable-mirror .DragHandle::before, .StackedListItem--isDraggable.draggable-mirror .DragHandle::after {
        background-color: #0042ff; }

.UniqueDropzone .BlockLayout .BlockWrapper .Block:nth-child(1n+3):not(.draggable-source--is-dragging) {
  min-height: 0;
  height: 0; }

.UniqueDropzone .BlockLayout--typeFlex .BlockWrapper {
  flex: 1 1 calc(50% - 0.8rem); }
  @media screen and (min-width: 480px) {
    .UniqueDropzone .BlockLayout--typeFlex .BlockWrapper {
      flex-basis: calc(25% - 0.8rem); } }

.UniqueDropzone .BlockLayout--typeGrid {
  grid-template-rows: repeat(6, 1fr);
  grid-template-columns: repeat(4, 1fr);
  grid-template-areas: 'a a b b' 'a a d d' 'c c d d' 'e e f f' 'e e g g' 'h h h h';
  margin-top: 0.6rem;
  border: 0.6rem solid #212529;
  background-color: #212529; }
  @media screen and (min-width: 768px) {
    .UniqueDropzone .BlockLayout--typeGrid {
      grid-template-columns: 1fr 1.025fr 1.025fr 1fr;
      grid-template-areas: 'a c c g' 'a c c g' 'a d f g' 'b d f g' 'b e f h' 'b e f h';
      margin-top: 0.8rem;
      border-width: 0.8rem; } }
  .UniqueDropzone .BlockLayout--typeGrid .BlockWrapper--isDropzone::before {
    content: '';
    position: absolute;
    top: -0.6rem;
    right: -0.6rem;
    bottom: -0.6rem;
    left: -0.6rem;
    display: block;
    pointer-events: none;
    background-color: #0042ff;
    opacity: 0;
    transition: opacity 120ms cubic-bezier(0.64, 0, 0.35, 1); }
    @media screen and (min-width: 768px) {
      .UniqueDropzone .BlockLayout--typeGrid .BlockWrapper--isDropzone::before {
        top: -0.8rem;
        right: -0.8rem;
        bottom: -0.8rem;
        left: -0.8rem; } }
  .UniqueDropzone .BlockLayout--typeGrid .BlockWrapper--isDropzone.draggable-dropzone--occupied:hover::before {
    opacity: 1; }
  .UniqueDropzone .BlockLayout--typeGrid .BlockContent {
    border: 0; }
  .UniqueDropzone .BlockLayout--typeGrid .BlockWrapper:nth-child(1) {
    grid-area: a; }
  .UniqueDropzone .BlockLayout--typeGrid .BlockWrapper:nth-child(2) {
    grid-area: b; }
  .UniqueDropzone .BlockLayout--typeGrid .BlockWrapper:nth-child(3) {
    grid-area: c; }
  .UniqueDropzone .BlockLayout--typeGrid .BlockWrapper:nth-child(4) {
    grid-area: d; }
  .UniqueDropzone .BlockLayout--typeGrid .BlockWrapper:nth-child(5) {
    grid-area: e; }
  .UniqueDropzone .BlockLayout--typeGrid .BlockWrapper:nth-child(6) {
    grid-area: f; }
  .UniqueDropzone .BlockLayout--typeGrid .BlockWrapper:nth-child(7) {
    grid-area: g; }
  .UniqueDropzone .BlockLayout--typeGrid .BlockWrapper:nth-child(8) {
    grid-area: h; }

@media screen and (min-width: 768px) {
  .UniqueDropzone .BlockLayout--typeFlex .BlockContent {
    min-height: 13.6rem; } }

@media screen and (min-width: 1440px) {
  .UniqueDropzone .BlockLayout--typeFlex .BlockContent {
    min-height: 18.4rem; } }

@media screen and (min-width: 768px) {
  .UniqueDropzone .BlockLayout--typeGrid .BlockContent {
    min-height: 12.8rem; } }

@media screen and (min-width: 1440px) {
  .UniqueDropzone .BlockLayout--typeGrid .BlockContent {
    min-height: 17.6rem; } }

.SimpleList {
  margin-left: auto;
  margin-right: auto;
  max-width: 62.5%; }

.MultipleContainers {
  display: grid;
  grid-gap: 0.8rem;
  grid-template-columns: 100%;
  grid-template-areas: 'a' 'b' 'c'; }
  @media screen and (min-width: 1440px) {
    .MultipleContainers {
      grid-template-columns: repeat(8, 1fr);
      grid-template-areas: 'a a a a a a a a' 'b b b b b c c c'; } }
  @media screen and (min-width: 1920px) {
    .MultipleContainers {
      margin-left: auto;
      margin-right: auto;
      max-width: 75%; } }
  .MultipleContainers .Container:nth-child(1) {
    grid-area: a; }
  .MultipleContainers .Container:nth-child(2) {
    grid-area: b; }
  .MultipleContainers .Container:nth-child(3) {
    grid-area: c; }
  @media screen and (min-width: 768px) and (max-width: 1439px) {
    .MultipleContainers .StackedListHeader {
      height: auto; } }
  .MultipleContainers .draggable-mirror {
    max-height: 8.6rem;
    transition: width 120ms cubic-bezier(0.64, 0, 0.35, 1), height 120ms cubic-bezier(0.64, 0, 0.35, 1); }
  .draggable--is-dragging .MultipleContainers .draggable-container-parent--capacity {
    color: #0042ff; }

.Flexbox .Block:nth-child(1), .Flexbox .Block.draggable--original ~ .Block:nth-child(2), .Flexbox .Block:nth-child(2), .Flexbox .Block.draggable--original ~ .Block:nth-child(3), .Flexbox .Block:nth-child(4), .Flexbox .Block.draggable--original ~ .Block:nth-child(5), .Flexbox .Block:nth-child(5), .Flexbox .Block.draggable--original ~ .Block:nth-child(6) {
  flex-basis: 50%; }

.Flexbox .Block:nth-child(3), .Flexbox .Block.draggable--original ~ .Block:nth-child(4), .Flexbox .Block:nth-child(6), .Flexbox .Block.draggable--original ~ .Block:nth-child(7), .Flexbox .Block:nth-child(7), .Flexbox .Block.draggable--original ~ .Block:nth-child(8) {
  flex-basis: 100%; }

.Flexbox .Block:nth-child(1) .BlockContent, .Flexbox .Block.draggable--original ~ .Block:nth-child(2) .BlockContent, .Flexbox .Block:nth-child(2) .BlockContent, .Flexbox .Block.draggable--original ~ .Block:nth-child(3) .BlockContent, .Flexbox .Block:nth-child(4) .BlockContent, .Flexbox .Block.draggable--original ~ .Block:nth-child(5) .BlockContent, .Flexbox .Block:nth-child(5) .BlockContent, .Flexbox .Block.draggable--original ~ .Block:nth-child(6) .BlockContent, .Flexbox .Block:nth-child(7) .BlockContent, .Flexbox .Block.draggable--original ~ .Block:nth-child(8) .BlockContent {
  height: 8.8rem; }

.Flexbox .Block:nth-child(3) .BlockContent, .Flexbox .Block.draggable--original ~ .Block:nth-child(4) .BlockContent, .Flexbox .Block:nth-child(6) .BlockContent, .Flexbox .Block.draggable--original ~ .Block:nth-child(7) .BlockContent {
  height: 13.6rem; }

@media screen and (min-width: 768px) {
  .Flexbox .Block:nth-child(1) .BlockContent, .Flexbox .Block.draggable--original ~ .Block:nth-child(2) .BlockContent, .Flexbox .Block:nth-child(2) .BlockContent, .Flexbox .Block.draggable--original ~ .Block:nth-child(3) .BlockContent, .Flexbox .Block:nth-child(4) .BlockContent, .Flexbox .Block.draggable--original ~ .Block:nth-child(5) .BlockContent, .Flexbox .Block:nth-child(5) .BlockContent, .Flexbox .Block.draggable--original ~ .Block:nth-child(6) .BlockContent, .Flexbox .Block:nth-child(7) .BlockContent, .Flexbox .Block.draggable--original ~ .Block:nth-child(8) .BlockContent {
    height: 13.6rem; }
  .Flexbox .Block:nth-child(3) .BlockContent, .Flexbox .Block.draggable--original ~ .Block:nth-child(4) .BlockContent, .Flexbox .Block:nth-child(6) .BlockContent, .Flexbox .Block.draggable--original ~ .Block:nth-child(7) .BlockContent {
    height: 18.4rem; } }

@media screen and (min-width: 1440px) {
  .Flexbox .Block:nth-child(1), .Flexbox .Block.draggable--original ~ .Block:nth-child(2), .Flexbox .Block:nth-child(2), .Flexbox .Block.draggable--original ~ .Block:nth-child(3), .Flexbox .Block:nth-child(3), .Flexbox .Block.draggable--original ~ .Block:nth-child(4) {
    flex-basis: 33.333%; }
  .Flexbox .Block:nth-child(4), .Flexbox .Block.draggable--original ~ .Block:nth-child(5) {
    flex-basis: 25%; }
  .Flexbox .Block:nth-child(5), .Flexbox .Block.draggable--original ~ .Block:nth-child(6) {
    flex-basis: 75%; }
  .Flexbox .Block:nth-child(6), .Flexbox .Block.draggable--original ~ .Block:nth-child(7), .Flexbox .Block:nth-child(7), .Flexbox .Block.draggable--original ~ .Block:nth-child(8) {
    flex-basis: 50%; }
  .Flexbox .Block:nth-child(1) .BlockContent, .Flexbox .Block.draggable--original ~ .Block:nth-child(2) .BlockContent, .Flexbox .Block:nth-child(2) .BlockContent, .Flexbox .Block.draggable--original ~ .Block:nth-child(3) .BlockContent, .Flexbox .Block:nth-child(3) .BlockContent, .Flexbox .Block.draggable--original ~ .Block:nth-child(4) .BlockContent, .Flexbox .Block:nth-child(4) .BlockContent, .Flexbox .Block.draggable--original ~ .Block:nth-child(5) .BlockContent, .Flexbox .Block:nth-child(6) .BlockContent, .Flexbox .Block.draggable--original ~ .Block:nth-child(7) .BlockContent, .Flexbox .Block:nth-child(7) .BlockContent, .Flexbox .Block.draggable--original ~ .Block:nth-child(8) .BlockContent {
    height: 18.4rem; }
  .Flexbox .Block:nth-child(4) .BlockContent, .Flexbox .Block.draggable--original ~ .Block:nth-child(5) .BlockContent, .Flexbox .Block:nth-child(5) .BlockContent, .Flexbox .Block.draggable--original ~ .Block:nth-child(6) .BlockContent {
    height: 23.2rem; } }

@media screen and (min-width: 1920px) {
  .Flexbox .Block:nth-child(1) .BlockContent, .Flexbox .Block.draggable--original ~ .Block:nth-child(2) .BlockContent, .Flexbox .Block:nth-child(2) .BlockContent, .Flexbox .Block.draggable--original ~ .Block:nth-child(3) .BlockContent, .Flexbox .Block:nth-child(3) .BlockContent, .Flexbox .Block.draggable--original ~ .Block:nth-child(4) .BlockContent, .Flexbox .Block:nth-child(4) .BlockContent, .Flexbox .Block.draggable--original ~ .Block:nth-child(5) .BlockContent, .Flexbox .Block:nth-child(6) .BlockContent, .Flexbox .Block.draggable--original ~ .Block:nth-child(7) .BlockContent, .Flexbox .Block:nth-child(7) .BlockContent, .Flexbox .Block.draggable--original ~ .Block:nth-child(8) .BlockContent {
    height: 23.2rem; }
  .Flexbox .Block:nth-child(4) .BlockContent, .Flexbox .Block.draggable--original ~ .Block:nth-child(5) .BlockContent, .Flexbox .Block:nth-child(5) .BlockContent, .Flexbox .Block.draggable--original ~ .Block:nth-child(6) .BlockContent {
    height: 28rem; } }

@media screen and (max-width: 767px) {
  .Floated .Block:nth-child(1), .Floated .Block.draggable--original ~ .Block:nth-child(2), .Floated .Block:nth-child(2), .Floated .Block.draggable--original ~ .Block:nth-child(3), .Floated .Block:nth-child(3), .Floated .Block.draggable--original ~ .Block:nth-child(4), .Floated .Block:nth-child(4), .Floated .Block.draggable--original ~ .Block:nth-child(5), .Floated .Block:nth-child(5), .Floated .Block.draggable--original ~ .Block:nth-child(6), .Floated .Block:nth-child(7), .Floated .Block.draggable--original ~ .Block:nth-child(8), .Floated .Block:nth-child(8), .Floated .Block.draggable--original ~ .Block:nth-child(9) {
    width: 50%; }
  .Floated .Block:nth-child(6), .Floated .Block.draggable--original ~ .Block:nth-child(7) {
    width: 100%; }
  .Floated .Block:nth-child(3) .BlockContent, .Floated .Block.draggable--original ~ .Block:nth-child(4) .BlockContent {
    height: 17.8rem; }
  .Floated .draggable--original ~ .Block:nth-child(3) .BlockContent {
    height: 8.6rem; } }

@media screen and (min-width: 768px) {
  .Floated .Block:nth-child(1), .Floated .Block.draggable--original ~ .Block:nth-child(2), .Floated .Block:nth-child(2), .Floated .Block.draggable--original ~ .Block:nth-child(3), .Floated .Block:nth-child(3), .Floated .Block.draggable--original ~ .Block:nth-child(4) {
    width: 33.333%; }
  .Floated .Block:nth-child(4), .Floated .Block.draggable--original ~ .Block:nth-child(5), .Floated .Block:nth-child(5), .Floated .Block.draggable--original ~ .Block:nth-child(6), .Floated .Block:nth-child(6), .Floated .Block.draggable--original ~ .Block:nth-child(7), .Floated .Block:nth-child(7), .Floated .Block.draggable--original ~ .Block:nth-child(8), .Floated .Block:nth-child(8), .Floated .Block.draggable--original ~ .Block:nth-child(9) {
    width: 50%; }
  .Floated .Block:nth-child(1) .BlockContent, .Floated .Block.draggable--original ~ .Block:nth-child(2) .BlockContent, .Floated .Block:nth-child(2) .BlockContent, .Floated .Block.draggable--original ~ .Block:nth-child(3) .BlockContent, .Floated .Block:nth-child(3) .BlockContent, .Floated .Block.draggable--original ~ .Block:nth-child(4) .BlockContent, .Floated .Block:nth-child(7) .BlockContent, .Floated .Block.draggable--original ~ .Block:nth-child(8) .BlockContent, .Floated .Block:nth-child(8) .BlockContent, .Floated .Block.draggable--original ~ .Block:nth-child(9) .BlockContent {
    height: 13.6rem; }
  .Floated .Block:nth-child(4) .BlockContent, .Floated .Block.draggable--original ~ .Block:nth-child(5) .BlockContent {
    height: 28rem; }
  .Floated .Block:nth-child(5) .BlockContent, .Floated .Block.draggable--original ~ .Block:nth-child(6) .BlockContent, .Floated .Block:nth-child(6) .BlockContent, .Floated .Block.draggable--original ~ .Block:nth-child(7) .BlockContent {
    height: 13.6rem; } }

@media screen and (min-width: 1440px) {
  .Floated .Block:nth-child(1) .BlockContent, .Floated .Block.draggable--original ~ .Block:nth-child(2) .BlockContent, .Floated .Block:nth-child(2) .BlockContent, .Floated .Block.draggable--original ~ .Block:nth-child(3) .BlockContent, .Floated .Block:nth-child(3) .BlockContent, .Floated .Block.draggable--original ~ .Block:nth-child(4) .BlockContent, .Floated .Block:nth-child(7) .BlockContent, .Floated .Block.draggable--original ~ .Block:nth-child(8) .BlockContent, .Floated .Block:nth-child(8) .BlockContent, .Floated .Block.draggable--original ~ .Block:nth-child(9) .BlockContent {
    height: 18.4rem; } }

@media screen and (min-width: 1920px) {
  .Floated .Block:nth-child(4) .BlockContent, .Floated .Block.draggable--original ~ .Block:nth-child(5) .BlockContent {
    height: 37.6rem; }
  .Floated .Block:nth-child(5) .BlockContent, .Floated .Block.draggable--original ~ .Block:nth-child(6) .BlockContent, .Floated .Block:nth-child(6) .BlockContent, .Floated .Block.draggable--original ~ .Block:nth-child(7) .BlockContent {
    height: 18.4rem; }
  .Floated .Block:nth-child(7) .BlockContent, .Floated .Block.draggable--original ~ .Block:nth-child(8) .BlockContent, .Floated .Block:nth-child(8) .BlockContent, .Floated .Block.draggable--original ~ .Block:nth-child(9) .BlockContent {
    height: 23.2rem; } }

.GridLayout .BlockLayout--typeGrid {
  grid-template-rows: repeat(5, 1fr);
  grid-template-columns: repeat(5, 1fr);
  grid-template-areas: 'a a a a a' 'b b c c c' 'd d c c c' 'd d e e e' 'f f f g g'; }
  @media screen and (min-width: 768px) {
    .GridLayout .BlockLayout--typeGrid {
      grid-template-rows: repeat(6, 13.6rem);
      grid-template-columns: repeat(8, 1fr);
      grid-template-areas: 'a a a a b b b b' 'a a a a d d d d' 'c c c c d d d d' 'e e e e e e e e' 'f f f g g g g g' 'f f f g g g g g'; } }
  @media screen and (min-width: 1440px) {
    .GridLayout .BlockLayout--typeGrid {
      grid-template-rows: repeat(6, 18.4rem); } }

.GridLayout .BlockWrapper:nth-child(1) {
  grid-area: a; }

.GridLayout .BlockWrapper:nth-child(2) {
  grid-area: b; }

.GridLayout .BlockWrapper:nth-child(3) {
  grid-area: c; }

.GridLayout .BlockWrapper:nth-child(4) {
  grid-area: d; }

.GridLayout .BlockWrapper:nth-child(5) {
  grid-area: e; }

.GridLayout .BlockWrapper:nth-child(6) {
  grid-area: f; }

.GridLayout .BlockWrapper:nth-child(7) {
  grid-area: g; }

.Collidable .BlockLayout--typePositioned {
  width: 100%;
  height: 60rem; }
  @media screen and (min-width: 768px) {
    .Collidable .BlockLayout--typePositioned {
      height: 64rem; } }
  @media screen and (min-width: 1440px) {
    .Collidable .BlockLayout--typePositioned {
      height: 80rem; } }

.Collidable .Block--item2,
.Collidable .Block--item3,
.Collidable .BlockWrapper:nth-child(1),
.Collidable .BlockWrapper:nth-child(4) {
  position: absolute;
  width: calc(50% - 1.5rem); }
  @media screen and (min-width: 768px) {
    .Collidable .Block--item2,
    .Collidable .Block--item3,
    .Collidable .BlockWrapper:nth-child(1),
    .Collidable .BlockWrapper:nth-child(4) {
      width: calc(25% - 0.8rem); } }

.Collidable .Block--item2,
.Collidable .Block--item3 {
  height: 20rem; }
  @media screen and (min-width: 768px) {
    .Collidable .Block--item2,
    .Collidable .Block--item3 {
      height: 41.6rem; } }
  @media screen and (min-width: 1440px) {
    .Collidable .Block--item2,
    .Collidable .Block--item3 {
      height: 52.8rem; } }

.Collidable .Block--item2 {
  top: 1.2rem;
  right: 1.2rem; }
  @media screen and (min-width: 768px) {
    .Collidable .Block--item2 {
      top: 1.6rem;
      right: auto;
      left: calc(25% + 1.6rem); } }

.Collidable .Block--item3 {
  bottom: 1.2rem;
  left: 1.2rem; }
  @media screen and (min-width: 768px) {
    .Collidable .Block--item3 {
      bottom: 1.6rem;
      right: 1.6rem;
      left: auto; } }

.Collidable .BlockWrapper:nth-child(1),
.Collidable .BlockWrapper:nth-child(4) {
  height: 13.2rem; }
  @media screen and (min-width: 768px) {
    .Collidable .BlockWrapper:nth-child(1),
    .Collidable .BlockWrapper:nth-child(4) {
      height: 18.4rem; } }
  @media screen and (min-width: 1440px) {
    .Collidable .BlockWrapper:nth-child(1),
    .Collidable .BlockWrapper:nth-child(4) {
      height: 23.2rem; } }

.Collidable .BlockWrapper:nth-child(1) {
  top: 1.2rem;
  left: 1.2rem; }
  @media screen and (min-width: 768px) {
    .Collidable .BlockWrapper:nth-child(1) {
      top: 1.6rem;
      left: 1.6rem; } }

.Collidable .BlockWrapper:nth-child(4) {
  bottom: 1.2rem;
  right: 1.2rem; }
  @media screen and (min-width: 768px) {
    .Collidable .BlockWrapper:nth-child(4) {
      top: 1.6rem;
      right: 1.6rem;
      bottom: auto; } }

.Collidable .CollidableWall {
  position: absolute;
  background-color: #212529;
  transition: background-color 240ms cubic-bezier(0.64, 0, 0.35, 1); }

.Collidable .CollidableWall--itemTop {
  top: 0;
  right: 0;
  left: 0;
  height: 0.6rem; }
  @media screen and (min-width: 768px) {
    .Collidable .CollidableWall--itemTop {
      height: 0.8rem; } }

.Collidable .CollidableWall--itemRight {
  top: 0;
  right: 0;
  bottom: 0;
  width: 0.6rem; }
  @media screen and (min-width: 768px) {
    .Collidable .CollidableWall--itemRight {
      width: 0.8rem; } }

.Collidable .CollidableWall--itemBottom {
  right: 0;
  bottom: 0;
  left: 0;
  height: 0.6rem; }
  @media screen and (min-width: 768px) {
    .Collidable .CollidableWall--itemBottom {
      height: 0.8rem; } }

.Collidable .CollidableWall--itemLeft {
  top: 0;
  bottom: 0;
  left: 0;
  width: 0.6rem; }
  @media screen and (min-width: 768px) {
    .Collidable .CollidableWall--itemLeft {
      width: 0.8rem; } }

.Collidable .draggable-mirror .BlockContent {
  transform: scale(0.9); }

.Collidable .draggable-container--is-dragging:not(.draggable-container--over) .Block--typeStripes .BlockContent {
  color: #ff0000; }

.Collidable .draggable-container--is-dragging:not(.draggable-container--over) .CollidableWall {
  background-color: #ff0000; }

.Collidable .CollidableWall.isColliding {
  background-color: #ff0000; }

.Snappable .BlockLayout--typeGrid {
  grid-template-columns: repeat(2, 1fr); }
  @media screen and (min-width: 768px) {
    .Snappable .BlockLayout--typeGrid {
      grid-template-rows: repeat(4, 13.6rem);
      grid-template-columns: repeat(4, 1fr); } }
  @media screen and (min-width: 1440px) {
    .Snappable .BlockLayout--typeGrid {
      grid-template-rows: repeat(4, 18.4rem); } }

.SwapAnimation .Block:nth-child(1), .SwapAnimation .Block.draggable--original ~ .Block:nth-child(2), .SwapAnimation .Block:nth-child(2), .SwapAnimation .Block.draggable--original ~ .Block:nth-child(3), .SwapAnimation .Block:nth-child(4), .SwapAnimation .Block.draggable--original ~ .Block:nth-child(5), .SwapAnimation .Block:nth-child(5), .SwapAnimation .Block.draggable--original ~ .Block:nth-child(6), .SwapAnimation .Block:nth-child(7), .SwapAnimation .Block.draggable--original ~ .Block:nth-child(8), .SwapAnimation .Block:nth-child(8), .SwapAnimation .Block.draggable--original ~ .Block:nth-child(9) {
  flex-basis: 50%; }

.SwapAnimation .Block:nth-child(3), .SwapAnimation .Block.draggable--original ~ .Block:nth-child(4), .SwapAnimation .Block:nth-child(6), .SwapAnimation .Block.draggable--original ~ .Block:nth-child(7), .SwapAnimation .Block:nth-child(9), .SwapAnimation .Block.draggable--original ~ .Block:nth-child(10) {
  flex-basis: 100%; }

@media screen and (min-width: 768px) {
  .SwapAnimation .Block:nth-child(1), .SwapAnimation .Block.draggable--original ~ .Block:nth-child(2), .SwapAnimation .Block:nth-child(2), .SwapAnimation .Block.draggable--original ~ .Block:nth-child(3), .SwapAnimation .Block:nth-child(3), .SwapAnimation .Block.draggable--original ~ .Block:nth-child(4), .SwapAnimation .Block:nth-child(4), .SwapAnimation .Block.draggable--original ~ .Block:nth-child(5), .SwapAnimation .Block:nth-child(5), .SwapAnimation .Block.draggable--original ~ .Block:nth-child(6), .SwapAnimation .Block:nth-child(6), .SwapAnimation .Block.draggable--original ~ .Block:nth-child(7), .SwapAnimation .Block:nth-child(7), .SwapAnimation .Block.draggable--original ~ .Block:nth-child(8), .SwapAnimation .Block:nth-child(8), .SwapAnimation .Block.draggable--original ~ .Block:nth-child(9), .SwapAnimation .Block:nth-child(9), .SwapAnimation .Block.draggable--original ~ .Block:nth-child(10) {
    flex-basis: 33.333%; } }

@media screen and (min-width: 768px) {
  .SwapAnimation .BlockContent {
    height: 13.6rem; } }

@media screen and (min-width: 1440px) {
  .SwapAnimation .BlockContent {
    height: 18.4rem; } }

@media screen and (min-width: 1920px) {
  .SwapAnimation .BlockContent {
    height: 23.2rem; } }