blog/src/components/atoms/Exif.module.scss

@import 'variables';
@import 'mixins';

.exif {
  margin-top: -($spacer * 1.5);
  margin-bottom: $spacer * 2;
}

.data {
  @include breakoutviewport;

  font-size: $font-size-mini;
  color: $brand-grey-light;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  margin-bottom: -3px;

  span {
    display: block;
    flex: 1 1 20%;
    white-space: nowrap;
    padding: $spacer / 1.5;
    border-bottom: 1px dashed $brand-grey-dimmed;

    &:first-child {
      flex-basis: 100%;
    }

    :global(.dark) & {
      border-bottom-color: $brand-grey;
    }
  }

  @media (min-width: $screen-sm) {
    margin-bottom: 0;

    span {
      border-left: 1px dashed $brand-grey-dimmed;
      border-bottom: 0;
      padding: $spacer;

      &,
      &:first-child {
        flex: 1 1 auto;
      }

      &:first-child {
        border-left: 0;
      }

      :global(.dark) & {
        border-left-color: $brand-grey;
      }
    }
  }
}

.map {
  @include breakoutviewport;
  @include media-frame;

  overflow: hidden;
  height: 160px;
}