.media {
  display: flex;
  align-items: flex-start; }

.media-body {
  flex: 1; }

.media {
  align-items: normal; }

.media-xxs {
  margin-bottom: -10px;
  margin-left: -10px; }
  .media-xxs:empty {
    margin-bottom: 0;
    margin-left: 0; }
  .media-xxs > * {
    margin-top: 0;
    margin-bottom: 10px;
    margin-left: 10px; }

.media-xs {
  margin-bottom: -15px;
  margin-left: -15px; }
  .media-xs:empty {
    margin-bottom: 0;
    margin-left: 0; }
  .media-xs > * {
    margin-top: 0;
    margin-bottom: 15px;
    margin-left: 15px; }

.media-sm {
  margin-bottom: -20px;
  margin-left: -20px; }
  .media-sm:empty {
    margin-bottom: 0;
    margin-left: 0; }
  .media-sm > * {
    margin-top: 0;
    margin-bottom: 20px;
    margin-left: 20px; }

.media-md,
.media-lg,
.media-xl {
  margin-bottom: -20px;
  margin-left: -30px; }
  .media-md:empty,
  .media-lg:empty,
  .media-xl:empty {
    margin-bottom: 0;
    margin-left: 0; }
  .media-md > *,
  .media-lg > *,
  .media-xl > * {
    margin-top: 0;
    margin-bottom: 20px;
    margin-left: 30px; }

@media (min-width: 768px) {
  .media-lg {
    margin-bottom: -30px;
    margin-left: -40px; }
    .media-lg > * {
      margin-bottom: 30px;
      margin-left: 40px; }
  .media-xl {
    margin-bottom: -30px;
    margin-left: -50px; }
    .media-xl > * {
      margin-bottom: 30px;
      margin-left: 50px; } }