Template:OutfitGallery/styles.css

.template-outfitgallery {
	display: flex;
	flex-direction: column;
	background-color: #F8F9FA;
	
	border-color: #A2A9B1;
	border-style: solid;
	border-top-width: 1px;
	border-left-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 0;
}

html.theme-dark .template-outfitgallery {
	border-color: #383838 !important;
	background-color: #242424 !important;
}

.template-outfitgallery .outfitgallery-title {
	font-weight: bold;
}

.template-outfitgallery .outfitgallery-title,
.template-outfitgallery .outfitgallery-variant-title {
	text-align: center;
	margin: 0;
	padding: 0.5em 0;
	
	border-style: solid;
	border-color: #A2A9B1;
	
	border-top-width: 0;
	border-left-width: 0;
	border-right-width: 0;
	border-bottom-width: 1px;
}

.template-outfitgallery .outfitgallery-variants {
	display: flex;
	flex-direction: row;
}

.template-outfitgallery .outfitgallery-variant {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.template-outfitgallery .outfitgallery-variant:not(:first-child) > .outfitgallery-variant-title {
	border-left-width: 1px;
}

.template-outfitgallery .outfitgallery-variant:nth-child(even) {
	background: #EBEBEB;
}

html.theme-dark .template-outfitgallery .outfitgallery-variant:nth-child(even) {
	background: #202020;
}

.template-outfitgallery .outfitgallery-outfits {
	display: flex;
	flex-direction: row;
	
	flex-grow: 1;
	align-items: stretch;
}

.template-outfitgallery .outfitgallery-variant:first-child .outfitgallery-outfit:first-child {
	border-left: none;
}

.template-outfitgallery .outfitgallery-outfit {
	padding: 0.2em 0.4em;
	flex-grow: 1;
	text-align: center;
	
	border-color: #A2A9B1;
	border-style: solid;
	border-top-width: 0;
	border-left-width: 1px;
	border-right-width: 0;
	border-bottom-width: 1px;
}

.template-outfitgallery img {
	/* Scale images on really small screens */
	max-width: 100%;
	height: auto;
}

html.theme-dark .template-outfitgallery .outfitgallery-title,
html.theme-dark .template-outfitgallery .outfitgallery-variant-title,
html.theme-dark .template-outfitgallery .outfitgallery-outfit {
	border-color: #383838 !important;
}

@media screen and (max-width: 1100px) {
	.template-outfitgallery {
		width: 100% !important;
	}
	
	.template-outfitgallery .outfitgallery-variants {
		flex-direction: column !important;
	}
	
	.template-outfitgallery .outfitgallery-outfit:first-child {
		border-left: none !important;
	}
	
	.template-outfitgallery .outfitgallery-variant-title {
		border-left-width: 0 !important;
	}
}