@import 'variables';
@import '../components/molecules/ProjectImage.module';

.imageWrap {
    margin-bottom: $spacer * 3;

    @media (min-width: $screen-xs) {
        margin-bottom: $spacer * 6;
    }
}

.title {
    font-size: $font-size-h2;

    @media (min-width: $screen-xs) {
        font-size: $font-size-h1;
    }
}

.description {
    font-size: $font-size-base;
    margin-bottom: $spacer * 2;
}

.meta {
    margin-top: -($spacer);
    margin-bottom: $spacer * 5;
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: $spacer * 2;

    @media (min-width: $screen-sm) {
        grid-template-columns: 2fr 3fr;
        grid-gap: $spacer * 2;
    }
}

.metaTitle {
    font-size: $font-size-h3;
    margin-bottom: $spacer * 1.5;

    span {
        display: block;
        margin-top: $spacer / 3;
        font-size: $font-size-base;
        font-family: $font-family-base;
        color: $brand-grey-light;
    }
}
