/* == Card == */
.wojo.card {
   position: relative;
   display: flex;
   flex-direction: column;
   min-width: 0;
   margin: 1rem 0;
   word-wrap: break-word;
   background-color: var(--white-color);
   border-radius: .375rem;
   box-shadow: 0 .375rem 1.5rem 0 var(--shadow-color);
}
.wojo.card > .content,
.wojo.card > .header,
.wojo.card > .footer {
   padding: calc(var(--unit-mini) * 3);
}
.wojo.card > .header.divided {
   box-shadow: 0 1px 0 0 var(--grey-color-500);
}
.wojo.card > .footer.divided {
   box-shadow: inset 0 1px 0 0 var(--grey-color-500);
}
.wojo.card .link + .link {
   margin-left: var(--margin);
}
.wojo.card > .header.small-gutters,
.wojo.card > .footer.small-gutters,
.wojo.segment.small-gutters {
   padding-bottom: calc(var(--gutter) / 2);
}
.wojo.card > .header.compact,
.wojo.card > .footer.compact {
   padding-bottom: 0;
}
.wojo.segment {
   position: relative;
   padding: var(--unit);
   background-color: var(--white-color);
   border-radius: .375rem;
   border: 1px solid var(--grey-color-500);
}
/* == Style == */
.wojo.framed.segment,
.wojo.framed.card,
.wojo.framed.cards > .card,
.wojo .framed.card {
   border: 1px solid var(--grey-color-500);
}
.wojo.compact.segment {
   padding: 0
}
.wojo.spaced.card,
.wojo.spaced.segment {
   margin: 2rem 0;
}
.wojo.basic.segment,
.wojo.basic.card,
.wojo.basic.cards > .card {
   box-shadow: none;
}
.wojo.simple.segment {
   border: 0;
}
.wojo.attached.segment,
.wojo.attached.card {
   margin: 0 0 0 0;
}
.wojo.top.attached.segment,
.wojo.top.attached.card {
   margin: 0 0 1rem 0;
}
.wojo.bottom.attached.segment,
.wojo.bottom.attached.card {
   margin: 0 0 1rem 0;
}
.wojo.card.active,
.wojo.segment.active,
.wojo.cards .card.active {
   box-shadow: 0 .375rem 1.5rem 0 var(--shadow-color);
}
/* == Link == */
a.wojo.segment {
   display: block;
}
a.wojo.card,
a.wojo.segment {
   transition: all .2s ease-in-out;
}
a.wojo.card:hover,
a.wojo.card:hover {
   -webkit-transform: translateY(-.1875rem);
   transform: translateY(-.1875rem)
}
.wojo.card.dimmed,
.wojo.cards .card.dimmed {
   overflow: hidden;
}
.wojo.transparent.segment,
.wojo.transparent.card {
   background-color: rgba(255, 255, 255, 0.1);
}
.wojo.all.transparent.segment,
.wojo.all.transparent.card {
   background-color: rgba(255, 255, 255, 0);
}
/* == Sizes == */
.wojo.small.card > .content,
.wojo.small.card > .header,
.wojo.small.card > .footer,
.wojo.cards .card.small > .content,
.wojo.cards .card.small > .header,
.wojo.cards .card.small > .footer {
   padding: var(--unit-small);
}
.wojo.large.card > .content,
.wojo.large.card > .header,
.wojo.large.card > .footer,
.wojo.cards .card.large > .content,
.wojo.cards .card.large > .header,
.wojo.cards .card.large > .footer {
   padding: calc(var(--unit) * 1.5);
}
.wojo.small.cards {
   margin-left: calc(var(--gutter-compensation) / 2);
}
.wojo.large.cards {
   margin-left: calc(var(--gutter-compensation) * 2);
}
.wojo.small.cards .card {
   margin-left: calc(var(--gutter) / 2);
   margin-bottom: calc(var(--gutter) / 2);
}
.wojo.large.cards .card {
   margin-left: calc(var(--gutter) * 2);
   margin-bottom: calc(var(--gutter) * 2);
}
.wojo.small.segment {
   padding: calc(var(--gutter) / 2);
}
/* == Grid == */
.wojo.cards {
   --card-gutter: var(--gutter);
}
.wojo.small.cards {
   --card-gutter: calc(var(--gutter) / 2);
}
.wojo.large.cards {
   --card-gutter: calc(var(--gutter) * 2);
}
.wojo.cards {
   display: flex;
   flex-flow: row wrap;
   margin-left: var(--gutter-compensation);
   flex-wrap: wrap;
}
.wojo.cards .card {
   position: relative;
   word-wrap: break-word;
   background-color: var(--white-color);
   background-clip: border-box;
   border-radius: .375rem;
   margin-left: var(--gutter);
   margin-bottom: var(--gutter);
   box-shadow: 0 .375rem 1.5rem 0 var(--shadow-color);
}
.wojo.cards .card > .content,
.wojo.cards .card > .header,
.wojo.cards .card > .footer {
   padding: calc(var(--unit-mini) * 3);
}
.wojo.cards .card > .header.divided {
   box-shadow: 0 1px 0 0 var(--grey-color-300);
}
.wojo.cards .card > .footer.divided {
   box-shadow: inset 0 1px 0 0 var(--grey-color-300);
}
.wojo.full.cards .card,
.wojo.full.card {
   flex-direction: column;
   display: flex;
}
.wojo.full.cards .card > .footer,
.wojo.full.card > .footer {
   margin-top: auto;
}
.wojo.fof.card {
   text-align: center;
   justify-content: center;
   align-items: center;
   box-shadow: none;
   margin: -2rem;
   overflow: hidden;
   border-radius: 1.5rem;
}
.wojo.fof.card img {
   position: relative;
   z-index: 1
}
.wojo.fof.card .container {
   position: absolute;
   z-index: 2;
}
.wojo.fof.card h1 {
   line-height: 1.5;
   margin: 0;
   color: var(--primary-color);
}
.wojo.fof.card p {
   font-size: 1.5rem;
   line-height: 1.7;
   color: var(--grey-color);
}
/* == Phone == */
@media screen and (max-width: 640px) {
   .wojo.cards {
      flex-wrap: wrap;
   }
   .wojo.cards .card {
      flex: 0 1 100%;
      max-width: 100%;
   }
   .wojo.card > .header.compact {
      padding: 0;
   }
}
/* == Mobile == */
@media screen and (min-width: 641px) and (max-width: 768px) {
   .wojo.cards {
      flex-wrap: wrap;
   }
   .wojo.cards .card {
      flex: 0 1 100%;
      max-width: 100%;
   }
   .wojo.cards.mobile-2 > .card {
      flex: 0 0 calc(50% - var(--gutter));
      max-width: calc(50% - var(--gutter));
   }
   .wojo.cards.mobile-3 > .card {
      flex: 0 0 calc(100% / 3 - var(--gutter));
      max-width: calc(100% / 3 - var(--gutter));
   }
   .wojo.cards.mobile-4 > .card {
      flex: 0 0 calc(25% - var(--gutter));
      max-width: calc(25% - var(--gutter));
   }
   .wojo.cards.mobile-5 > .card {
      flex: 0 0 calc(20% - var(--gutter));
      max-width: calc(20% - var(--gutter));
   }
   .wojo.card > .header.compact {
      padding: 0;
   }
}
/* == Tablet == */
@media screen and (min-width: 769px) and (max-width: 1199px) {
   .wojo.cards.tablet-1,
   .wojo.cards.tablet-2,
   .wojo.cards.tablet-3,
   .wojo.cards.tablet-4,
   .wojo.cards.tablet-5 {
      flex-wrap: wrap;
   }
   .wojo.cards.tablet-1 > .card {
      flex: 0 0 calc(100% - var(--card-gutter));
      max-width: calc(100% - var(--card-gutter));
   }
   .wojo.cards.tablet-2 > .card {
      flex: 0 0 calc(50% - var(--card-gutter));
      max-width: calc(50% - var(--card-gutter));
   }
   .wojo.cards.tablet-3 > .card {
      flex: 0 0 calc(100% / 3 - var(--card-gutter));
      max-width: calc(100% / 3 - var(--card-gutter));
   }
   .wojo.cards.tablet-4 > .card {
      flex: 0 0 calc(25% - var(--card-gutter));
      max-width: calc(25% - var(--card-gutter));
   }
   .wojo.cards.tablet-5 > .card {
      flex: 0 0 calc(20% - var(--card-gutter));
      max-width: calc(20% - var(--card-gutter));
   }
}
/* == Screen == */
@media screen and (min-width: 1200px) {
   .wojo.cards.screen-1,
   .wojo.cards.screen-2,
   .wojo.cards.screen-3,
   .wojo.cards.screen-4,
   .wojo.cards.screen-5 {
      flex-wrap: wrap;
   }
   .wojo.cards.screen-1 > .card {
      flex: 0 0 calc(100% - var(--card-gutter));
      max-width: calc(100% - var(--card-gutter));
   }
   .wojo.cards.screen-2 > .card {
      flex: 0 0 calc(50% - var(--card-gutter));
      max-width: calc(50% - var(--card-gutter));
   }
   .wojo.cards.screen-3 > .card {
      flex: 0 0 calc(100% / 3 - var(--card-gutter));
      max-width: calc(100% / 3 - var(--card-gutter));
   }
   .wojo.cards.screen-4 > .card {
      flex: 0 0 calc(25% - var(--card-gutter));
      max-width: calc(25% - var(--card-gutter));
   }
   .wojo.cards.screen-5 > .card {
      flex: 0 0 calc(20% - var(--card-gutter));
      max-width: calc(20% - var(--card-gutter));
   }
}