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 solid $brand-grey-dimmed;

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

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

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

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

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

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

    overflow: hidden;
    height: 160px;
}