@import '../../../styles/essentials';

.gallery {
	padding-top: 60px; padding-bottom: 60px;
	.container.full { padding: 0 $mobile-padding; }
	.gallery-grid {
		.columns {
			flex-direction: row;
			justify-content: flex-start;
			margin: 0 -0.5rem -1rem;
			.col {
				padding-left: 0.5rem; padding-right: 0.5rem; margin-bottom: 1rem;
				flex-basis: 50%;
				.gallery-image {
					height: 0;
					padding-bottom: 100%;
					background-position: center center;
					background-size: cover;
				}
				@include st {
					&.flex-basis-100 {
						flex-basis: 100%;
						.gallery-image { padding-bottom: calc(25% - 0.75rem); }
					}
					&.flex-basis-50 {
						flex-basis: 50%;
						.gallery-image { padding-bottom: calc(50% - 0.5rem); }
					}
					&.flex-basis-25 {
						flex-basis: 25%;
					}
				}
			}
		}
	}
}