@import "tm_mixins";

.cherry-projects-terms-wrapper{
	color: $dark_color_1;
	position: relative;
}

.projects-terms-container{
	position: relative;
		&.grid-layout{
			.projects-terms-list{
				display: flex;
				flex-flow: row wrap;
				.projects-terms-item{
					flex: 0 1 auto;
				}
			}
		}
		&.masonry-layout{
			.projects-terms-list {
				display: flex;
				flex-flow: row nowrap;
				justify-content: flex-start;
				align-items: stretch;

				@media screen and (min-width: 1px) and (max-width: 599px){
					&.column-mobile-1 {
						&[data-columns]::before {
							content: '1 .salvattore-column';
						}
						.salvattore-column {
							width: 100%;
						}
					}
					&.column-mobile-2 {
						&[data-columns]::before {
							content: '2 .salvattore-column';
						}
						.salvattore-column {
							width: 50%;
						}
					}
					&.column-mobile-3 {
						&[data-columns]::before {
							content: '3 .salvattore-column';
						}
						.salvattore-column {
							width: 33.33333%;
						}
					}
					&.column-mobile-4 {
						&[data-columns]::before {
							content: '4 .salvattore-column';
						}
						.salvattore-column {
							width: 25%;
						}
					}
					&.column-mobile-5 {
						&[data-columns]::before {
							content: '5 .salvattore-column';
						}
						.salvattore-column {
							width: 20%;
						}
					}
					&.column-mobile-6 {
						&[data-columns]::before {
							content: '6 .salvattore-column';
						}
						.salvattore-column {
							width: 16.66666%;
						}
					}
				}

				@media screen and (min-width: 600px) and (max-width: 899px){
					&.column-portrait-tablet-1 {
						&[data-columns]::before {
							content: '1 .salvattore-column';
						}
						.salvattore-column {
							width: 100%;
						}
					}
					&.column-portrait-tablet-2 {
						&[data-columns]::before {
							content: '2 .salvattore-column';
						}
						.salvattore-column {
							width: 50%;
						}
					}
					&.column-portrait-tablet-3 {
						&[data-columns]::before {
							content: '3 .salvattore-column';
						}
						.salvattore-column {
							width: 33.33333%;
						}
					}
					&.column-portrait-tablet-4 {
						&[data-columns]::before {
							content: '4 .salvattore-column';
						}
						.salvattore-column {
							width: 25%;
						}
					}
					&.column-portrait-tablet-5 {
						&[data-columns]::before {
							content: '5 .salvattore-column';
						}
						.salvattore-column {
							width: 20%;
						}
					}
					&.column-portrait-tablet-6 {
						&[data-columns]::before {
							content: '6 .salvattore-column';
						}
						.salvattore-column {
							width: 16.66666%;
						}
					}
				}

				@media screen and (min-width: 900px) and (max-width: 1199px){
					&.column-album-tablet-1 {
						&[data-columns]::before {
							content: '1 .salvattore-column';
						}
						.salvattore-column {
							width: 100%;
						}
					}
					&.column-album-tablet-2 {
						&[data-columns]::before {
							content: '2 .salvattore-column';
						}
						.salvattore-column {
							width: 50%;
						}
					}
					&.column-album-tablet-3 {
						&[data-columns]::before {
							content: '3 .salvattore-column';
						}
						.salvattore-column {
							width: 33.33333%;
						}
					}
					&.column-album-tablet-4 {
						&[data-columns]::before {
							content: '4 .salvattore-column';
						}
						.salvattore-column {
							width: 25%;
						}
					}
					&.column-album-tablet-5 {
						&[data-columns]::before {
							content: '5 .salvattore-column';
						}
						.salvattore-column {
							width: 20%;
						}
					}
					&.column-album-tablet-6 {
						&[data-columns]::before {
							content: '6 .salvattore-column';
						}
						.salvattore-column {
							width: 16.66666%;
						}
					}
				}

				@media screen and (min-width: 1200px) and (max-width: 1599px){
					&.column-laptop-1 {
						&[data-columns]::before {
							content: '1 .salvattore-column';
						}
						.salvattore-column {
							width: 100%;
						}
					}
					&.column-laptop-2 {
						&[data-columns]::before {
							content: '2 .salvattore-column';
						}
						.salvattore-column {
							width: 50%;
						}
					}
					&.column-laptop-3 {
						&[data-columns]::before {
							content: '3 .salvattore-column';
						}
						.salvattore-column {
							width: 33.33333%;
						}
					}
					&.column-laptop-4 {
						&[data-columns]::before {
							content: '4 .salvattore-column';
						}
						.salvattore-column {
							width: 25%;
						}
					}
					&.column-laptop-5 {
						&[data-columns]::before {
							content: '5 .salvattore-column';
						}
						.salvattore-column {
							width: 20%;
						}
					}
					&.column-laptop-6 {
						&[data-columns]::before {
							content: '6 .salvattore-column';
						}
						.salvattore-column {
							width: 16.66666%;
						}
					}
				}

				@media ( min-width: 1600px ) {
					&.column-desktop-1 {
						&[data-columns]::before {
							content: '1 .salvattore-column';
						}
						.salvattore-column {
							width: 100%;
						}
					}
					&.column-desktop-2 {
						&[data-columns]::before {
							content: '2 .salvattore-column';
						}
						.salvattore-column {
							width: 50%;
						}
					}
					&.column-desktop-3 {
						&[data-columns]::before {
							content: '3 .salvattore-column';
						}
						.salvattore-column {
							width: 33.33333%;
						}
					}
					&.column-desktop-4 {
						&[data-columns]::before {
							content: '4 .salvattore-column';
						}
						.salvattore-column {
							width: 25%;
						}
					}
					&.column-desktop-5 {
						&[data-columns]::before {
							content: '5 .salvattore-column';
						}
						.salvattore-column {
							width: 20%;
						}
					}
					&.column-desktop-6 {
						&[data-columns]::before {
							content: '6 .salvattore-column';
						}
						.salvattore-column {
							width: 16.66666%;
						}
					}
				}
			}
		}
		&.list-layout{
			.projects-terms-list{
				.projects-terms-item{
					margin-bottom: 20px
				}
			}
			.inner-wrapper{
				display: flex;
				flex-flow: row nowrap;
				align-items: flex-start;
			}
			.project-terms-media{
				flex: 0 1 auto;
				min-width: 30%;
				margin-right: 20px;
			}
			.project-terms-content{
				flex: 0 1 auto;
				min-width: 70%;
			}
		}
		&.cascading-grid-layout{
			.projects-terms-list{
				display: flex;
				flex-flow: row wrap;
				align-items: stretch;
				align-content: stretch;
				.projects-terms-item{
					flex: 0 1 auto;
					height: auto;
				}
			}
		}
		.term-permalink{
			span{
				&:before{
					content: "\f103";
				}
			}
		}
}

.projects-terms-list{
	position: relative;
}