/* CSS Document */

img {
	width: 100%;
	height: auto;
	object-fit: contain;
}


video {
	width: 100%;
	height: auto;
}

#project-body {
	grid-row-start: 2;
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: auto;
}

.project-title {
	grid-column: 1 / -1;
	display: grid;
}

.appicons {
	grid-area: 1 / span 1 / span 1 / -1
	justify-self: right;
}

.appicons div {
	float: right;
	padding-left: var(--standard-padding);
}

.appicons::after {
	float: none;
}

.appicons img {
	height: 29px;
	width: auto;
}

@media (max-width: 992px) {
	.style-frames, .stickers {
		display: grid;
		grid-template-columns: 100%;
		grid-template-rows: auto;
		grid-row-gap: var(--standard-padding);
	}
	
	.project-title {
		grid-template-columns: 100%;
	}
}

@media (min-width: 992px) {
	.dual-indent :not(h4):not(h5):not(h6) {
		margin-left: 20px;
		margin-right: 20px;
	}
	
	.video, .image {
		display: flex;
		justify-content: center;
	}
	
	img {
		margin-left: 0 !important;
	}
	
	.social-logo img {
		margin: 10px !important;
	}
	
	.style-frames {
		display: grid;
		grid-template-columns: 30% 30% 30%;
		grid-template-rows: auto;
		grid-row-gap: var(--standard-padding);
		grid-column-gap: var(--standard-padding);
	}
	
	.stickers {
		display: grid;
		grid-template-columns: 22% 22% 22% 22%;
		grid-template-rows: auto;
		grid-row-gap: var(--standard-padding);
		grid-column-gap: var(--standard-padding);
	}

	.project-title {
		grid-template-columns: 50% 50%;
	}
	
	.project-title h4 {
		margin-right: 0;
	}
}