#debug-wall {
  display: none;
}

.font-caveat {
  font-family: 'Caveat', cursive;
}
.font-caveat .note {
  line-height: 0.7;
  font-size: 1.6em;
}

.font-gochi-hand {
  font-family: 'Gochi Hand', cursive;
}
.font-gochi-hand .note {
  line-height: 0.7;
  font-size: 1.6em;
}

.font-just-another-hand {
  font-family: 'Just Another Hand', cursive;
}
.font-just-another-hand .note {
  line-height: 0.8;
  font-size: 1.8em;
}

.font-mansalva {
  font-family: 'Mansalva', cursive;
}
.font-mansalva .note {
  line-height: 0.7;
  font-size: 1.4em;
}

.font-montserrat {
  font-family: 'Montserrat', sans-serif;
  font-weight: bold;
  font-style: normal;
  letter-spacing: 0px;
}

.font-montserrat {
  line-height: 0.9;
  font-size: 1em;
}

.font-silkserif-bold {
  font-family: 'SilkSerif', serif;
  font-weight: bold;
  font-style: normal;
  letter-spacing: 0px;
}

/* .font-silkserif {
  line-height: 1;
  font-size: 1em;
} */

.font-barlow {
  font-family: 'Barlow', sans-serif;
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: 0px;
}

/* .font-barlow {
  line-height: 1;
  font-size: 1em;
} */

.grid {
  margin: 1em;
  position: relative;
}
.grid-wrapper {
  position: relative;
  min-height: 400px;
}
.brand-accent {
  position: absolute;
  right: 0;
  bottom: 0;
  opacity: 0.3;
}
.item {
  display: block;
  position: absolute;
  margin: 5px;
  z-index: 1;
  /* background-color: blue; */
  color: green;
}
.item.width-1 {
  width: 64px;
}
.item.height-1 {
  height: 64px;
}
.item.height-2 {
  height: 128px;
}
.item.width-2 {
  width: 128px;
}
.item.width-3 {
  width: 192px;
}
.item.height-3 {
  height: 192px;
}
.item.height-4 {
  height: 256px;
}
.item.width-4 {
  width: 256px;
}
.item.height-5 {
  height: 320px;
}
.item.width-5 {
  width: 320px;
}
.item.height-6 {
  height: 384px;
}
.item.width-6 {
  width: 384px;
}
.item.muuri-item-dragging {
  z-index: 3;
}
.item.muuri-item-releasing {
  z-index: 2;
}
.item.muuri-item-hidden {
  z-index: 0;
}
.item-content {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: default;
  display: flex;
  align-items: center;
  justify-content: center;
}

.item-content > img {
  display: block;
  border-radius: 6px;
}

.note-wrapper {

}
.note {

}
.note-text {

}
.note-photo .note-wrapper .note img {
  max-width: 100%;
  max-height: 100%;
}
.note-brand-logo .note-wrapper .note img {
  max-width: 100%;
  max-height: 100%;
}

.angle-3 {
  transform: rotate(3deg);
}
.angle-neg-3 {
  transform: rotate(-3deg);
}
.angle-5 {
  transform: rotate(5deg);
}
.angle-neg-5 {
  transform: rotate(-5deg);
}
.angle-10 {
  transform: rotate(10deg);
}
.angle-neg-10 {
  transform: rotate(-10deg);
}
.angle-13 {
  transform: rotate(13deg);
}
.angle-neg-13 {
  transform: rotate(-13deg);
}
.angle-15 {
  transform: rotate(15deg);
}
.angle-neg-15 {
  transform: rotate(-15deg);
}
.angle-18 {
  transform: rotate(18deg);
}
.angle-neg-18 {
  transform: rotate(-18deg);
}
.angle-20 {
  transform: rotate(20deg);
}
.angle-neg-20 {
  transform: rotate(-20deg);
}
.angle-25 {
  transform: rotate(25deg);
}
.angle-neg-25 {
  transform: rotate(-25deg);
}