/* Basscss Media Object */

.media,
.sm-media,
.md-media,
.lg-media {
  margin-left: -var(--media-object-space);
  margin-right: -var(--media-object-space);
}

.media {
  display: flex;
}

.media-center {
  align-items: center;
}

.media-bottom {
  align-items: flex-end;
}

.media-img,
.media-body {
  padding-left: var(--media-object-space);
  padding-right: var(--media-object-space);
}

.media-body {
  flex: 1 1 auto;
}

@media (--breakpoint-sm) {
  .sm-media { display: flex }
}

@media (--breakpoint-md) {
  .md-media { display: flex }
}

@media (--breakpoint-lg) {
  .lg-media { display: flex }
}

@custom-media --breakpoint-sm (min-width: 40em);
@custom-media --breakpoint-md (min-width: 52em);
@custom-media --breakpoint-lg (min-width: 64em);

:root {
  --space-1: .5rem;
  --media-object-space: var(--space-1);
}