<commit_before>// MEDIA QUERIES
// --------------------------------------------------
@mixin respond-to($size, $operator: 'min', $unit: 'px', $query: 'only screen', $unitToRender:'') {
	@if unitless($size) {
		$unitToRender: 'px'
	} @else {
		$unitToRender: ''
	}
  	@media #{$query} and (#{$operator}-width: #{$size}#{$unitToRender}) {
    	@content;
  	}
}

@mixin column-gap($size) {
    -webkit-column-gap: $size#{'px'};
    -moz-column-gap: $size#{'px'};
    column-gap: $size#{'px'};
}

@mixin column-count($quantity) {
    -webkit-column-count: $quantity;
    -moz-column-count: $quantity;
    column-count: $quantity;
}

body {
	min-height: 2000px;
	padding-top: 50px;
}

#wrapper {
    max-width: 1100px;
    margin: 50px auto;
    padding: 0 15px;
}

.container-pins {
    &:hover {
		& .pin-image {
			-webkit-filter: grayscale(0.9);
		}
    }

    @include respond-to(480) {
	    @include column-gap(15);
	    @include column-count(2);
    }
    @include respond-to(768) {
    	@include column-count(3);
    }
    @include respond-to(1024) {
    	&:not(.profile) {
    		@include column-count(4);
    	}
    }
    @include respond-to(1100) {
    	&:not(.profile) {
    		@include column-count(5);
    	}
    }
}

.aggregation {
	background: #fff;
	padding: $grid-gutter-width;
	margin-bottom: $grid-gutter-width;
	box-shadow: 0 1px 7px 2px rgba(0,0,0,.1);

	& .pin {
		max-width: 270px;
		margin-right: $grid-gutter-width / 2;
		box-shadow: none;
		border: 1px solid #eee;
	}
	& .pin-image {
		max-width: 100%;
		height: auto;
		width: auto;
	}

	& .pin-image-holder {
		width: auto;
		max-height: 270px;
	}
}

.aggregation-header {
	height: 45px;
	line-height: 45px;
	margin-bottom: $grid-gutter-width / 2;
	text-transform: uppercase;
}

.aggregation-time {
	text-transform: none;
	font-size: 10px;
	color: #999;
}

.pin {
    display: inline-block;
    background: #fff;
    box-shadow: 0 1px 7px 2px rgba(0,0,0,.1);
    margin: 0 0 $grid-gutter-width / 2;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
	@include transition(all .2s ease);
 	
	&:hover {
		& .pin-image {
			@include scale(1.05);
			-webkit-filter: grayscale(0);
		}
	}

	& textarea {
		resize: vertical;
	}
}

.pin-image {
    width: 100%;
	@include transition(all .4s ease);
}

.pin-image-holder {
	overflow: hidden;
	width: 100%;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
	border-bottom: 1px solid rgba(0,0,0,.1);	
}

.pin-caption {
	padding: $grid-gutter-width / 2 $grid-gutter-width / 2 0 $grid-gutter-width / 2;
	color: $gray;
	font-size: 12px;<commit_msg>fix css for example app<commit_after>// MEDIA QUERIES
// --------------------------------------------------
@mixin respond-to($size, $operator: 'min', $unit: 'px', $query: 'only screen', $unitToRender:'') {
	@if unitless($size) {
		$unitToRender: 'px'
	} @else {
		$unitToRender: ''
	}
  	@media #{$query} and (#{$operator}-width: #{$size}#{$unitToRender}) {
    	@content;
  	}
}

@mixin column-gap($size) {
    -webkit-column-gap: $size#{'px'};
    -moz-column-gap: $size#{'px'};
    column-gap: $size#{'px'};
}

@mixin column-count($quantity) {
    -webkit-column-count: $quantity;
    -moz-column-count: $quantity;
    column-count: $quantity;
}

body {
	min-height: 2000px;
	padding-top: 50px;
}

#wrapper {
    max-width: 1100px;
    margin: 50px auto;
    padding: 0 15px;
}

.container-pins {

    @include respond-to(480) {
	    @include column-gap(15);
	    @include column-count(2);
    }
    @include respond-to(768) {
    	@include column-count(3);
    }
    @include respond-to(1024) {
    	&:not(.profile) {
    		@include column-count(4);
    	}
    }
    @include respond-to(1100) {
    	&:not(.profile) {
    		@include column-count(5);
    	}
    }
}

.aggregation {
	background: #fff;
	padding: $grid-gutter-width;
	margin-bottom: $grid-gutter-width;
	box-shadow: 0 1px 7px 2px rgba(0,0,0,.1);

	& .pin {
		max-width: 270px;
		margin-right: $grid-gutter-width / 2;
		box-shadow: none;
		border: 1px solid #eee;
	}
	& .pin-image {
		max-width: 100%;
		height: auto;
		width: auto;
	}

	& .pin-image-holder {
		width: auto;
		max-height: 270px;
	}
}

.aggregation-header {
	height: 45px;
	line-height: 45px;
	margin-bottom: $grid-gutter-width / 2;
	text-transform: uppercase;
}

.aggregation-time {
	text-transform: none;
	font-size: 10px;
	color: #999;
}

.pin {
    display: inline-block;
    background: #fff;
    box-shadow: 0 1px 7px 2px rgba(0,0,0,.1);
    margin: 0 0 $grid-gutter-width / 2;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
	@include transition(all .2s ease);

	& textarea {
		resize: vertical;
	}
}

.pin-image {
    width: 100%;
}

.pin-image-holder {
	overflow: hidden;
	width: 100%;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
	border-bottom: 1px solid rgba(0,0,0,.1);	
}

.pin-caption {
	padding: $grid-gutter-width / 2 $grid-gutter-width / 2 0 $grid-gutter-width / 2;
	color: $gray;
	font-size: 12px;
{'fraction_non_alphanumeric': 0.2001194743130227, 'fraction_numerical': 0.04121863799283154, 'mean_word_length': 2.674469641550841, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4811581', 'n_tokens_mistral': 2275, 'n_tokens_neox': 2013, 'n_words': 397}