.jdm-c-grid--item {
  display: flex;
  margin-top: 2em;
}
.jdm-c-grid--item::before {
  content: '';
  flex: 0 0 auto;
  margin-left: -1px;
  padding-top: 33.333%;
  width: 1px;
}
.jdm-c-grid--item > * {
  flex: 1 1 100%;
}
.jdm-c-grid--items {
  display: flex;
  flex-direction: column;
  list-style-type: none;
  margin-top: -2em;
}

@supports (--custom-properties: 0) {
  .jdm-c-grid--item {
    order: var(--stacking-order, 0);
  }
}

@media (min-width: 64em), print {
  .jdm-c-grid--item {
    flex: 1 1 auto;
    margin: 0.5em;
    order: 0;
  }
    .jdm-c-grid--item-large {
      flex: 0 0 100%;
      flex-basis: calc(100% - 1em);
    }
    .jdm-c-grid--item-large::before {
      padding-top: calc(56.25% / 3);
    }
    .jdm-c-grid--item-medium {
      flex: 0 0 66.666%;
      flex-basis: calc(66.666% - 1em);
    }
    .jdm-c-grid--item-medium::before {
      padding-top: calc(56.25% / 2);
    }
    .jdm-c-grid--item-small {
      flex: 0 0 33.333%;
      flex-basis: calc(33.333% - 1em);
    }
    .jdm-c-grid--item-small::before {
      padding-top: 56.25%;
    }
  .jdm-c-grid--items {
    flex-direction: row;
    flex-wrap: wrap;
    margin: -0.5em;
  }
}