@import url("https://fonts.googleapis.com/css2?family=Jura:wght@300..700&display=swap");

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	font-family: "Jura", sans-serif;
	margin: 18px;
}

@media only screen and (min-width: 2000px) {
	body {
		max-width: 2000px;
		margin: 18px auto;
	}
}

/* NAV */

nav {
	width: 100%;
}

.home-btn {
	text-decoration: none;
	color: black;
	font-weight: 700;
	font-size: 20px;
}

/* INTRO */

.subtitle {
	color: #6d6d6d;
	margin-top: 8px;
}

@media only screen and (max-width: 600px) {
	.hide {
		display: none;
	}
}

/* MAIN */

img {
	border-radius: 7px;
}

.work-title {
	color: #6d6d6d;
	margin-bottom: 9px;
	font-size: 25px;
}

.work-home {
	display: flex;
	gap: 15px;
	margin: 15px 0;
}

.work-img-cont {
	width: 40%;
}

.work-img {
	width: 100%;
}

.work-text {
	width: 60%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.work-text-top {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.work-tag {
	font-size: 20px;
}

.work-text-bottom {
	display: flex;
	/* align-items: end; */
	justify-content: end;
}

hr {
	background-color: black;
	/* border: black 1px solid; */
}

@media only screen and (max-width: 800px) {
	p {
		font-size: 15px;
	}

	.work-img-cont {
		width: 50%;
	}

	.work-text {
		width: 50%;
	}
}

@media only screen and (max-width: 600px) {
	.work-home {
		flex-direction: column;
	}

	.work-img-cont {
		width: 100%;
	}

	.work-text {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		gap: 100px;
	}

	p {
		font-size: 15px;
	}
}

/* FOOTER */

.links-cont {
	display: flex;
	gap: 60px;
}

.links {
	text-decoration: none;
	color: black;
}

@media only screen and (max-width: 600px) {
	.links-cont {
		display: flex;
		justify-content: space-evenly;
		gap: auto;
	}
}

/* GRAPHIC DESIGN PAGE */

.page-title {
	font-size: 27px;
	margin-bottom: 9px;
}

.poster-cont {
	width: 100%;
	display: flex;
	flex-direction: row;
	gap: 10px;
}

.poster-cont-small-1 {
	display: flex;
	width: 50%;
	gap: 10px;
}

.poster-cont-small-2 {
	display: flex;
	width: 50%;
	gap: 10px;
}

.poster {
	width: 49%;
}

@media only screen and (max-width: 600px) {
	.poster-cont {
		flex-direction: column;
	}

	.poster-cont-small-1 {
		width: 100%;
		gap: 10px;
	}

	.poster-cont-small-2 {
		width: 100%;
		gap: 10px;
	}

	.poster {
		width: 50%;
	}
}

.text-cont {
	display: flex;
	gap: 10px;
}

@media only screen and (max-width: 600px) {
	.text-cont {
		flex-direction: column;
	}
}

.sticker-img-lrg {
	width: 100%;
}

.sticker-img-sml {
	width: 100%;
	display: none;
}

@media only screen and (max-width: 800px) {
	.sticker-img-sml {
		display: block;
	}

	.sticker-img-lrg {
		display: none;
	}
}

/* ARCHITECTURE */

.arch-img-cont-lrg {
	width: 100%;
	display: flex;
	gap: 10px;
}

.arch-img-intro {
	max-width: 100%;
}

.arch-img-cont-sml {
	display: flex;
	align-items: center;
	justify-content: center;
}

@media only screen and (max-width: 800px) {
	.arch-img-cont-lrg {
		flex-direction: column;
	}
}

.arch-img-cont-sml-two {
	display: flex;
	gap: 10px;
	width: 50%;
	overflow: hidden;
}

.arch-img-rd {
	max-width: 50%;
}

@media only screen and (max-width: 800px) {
	.arch-img-cont-sml-two {
		width: 100%;
	}
}

.arch-img-cont-sml-three {
	display: flex;
	border: solid red 2px;
}

/* GRID */

.grid-container {
	display: grid;
	grid-template-columns: auto auto auto;
	gap: 10px;
	/* background-color: #2196f3; */
	width: 100%;
}

.grid-container > div {
	background-color: rgba(255, 255, 255, 0.8);
	padding: 20px 0;
	font-size: 30px;
}

.item1 {
	grid-column-start: 1;
	grid-column-end: 2;
}

.arch-img-rd-two {
	object-fit: contain;
	max-width: 100%;
}

.arch-img-intro-two {
	max-width: 100%;
	object-fit: contain;
}

@media only screen and (max-width: 800px) {
	.item3 {
		grid-column-start: 1;
		grid-column-end: 4;
	}
}

.arch14 {
	width: 100%;
}

/* ART PAGE */

.art-grid {
	display: grid;
	grid-template-columns: auto auto auto auto;
	gap: 10px;
	max-width: 100%;
	height: auto;
}

.art-grid-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media only screen and (max-width: 800px) {
	.art-grid {
		grid-template-columns: auto auto;
	}
}

.art-grid-two {
	display: grid;
	grid-template-columns: auto auto auto;
	gap: 10px;
	max-width: 100%;
	height: auto;
}

.art-grid-img-second {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media only screen and (max-width: 800px) {
	.art-grid-two {
		grid-template-columns: auto auto;
	}

	.art-grid-img-1-lrg {
		grid-column-start: 1;
		grid-column-end: 3;
	}

	.art-grid-img-4-eleven {
		grid-column-start: 1;
		grid-column-end: 3;
	}

	.art-grid-img-4-ten {
		grid-column-start: 1;
		grid-column-end: 3;
	}
}

.art-grid-last {
	display: grid;
	grid-template-columns: auto auto auto;
	gap: 10px;
	max-width: 100%;
	height: auto;
}

.art-img-last {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media only screen and (max-width: 800px) {
	.art-grid-last {
		grid-template-columns: auto;
	}
}

/* ECOMMERCE DESIGN */

.gift-title {
	margin-bottom: 8px;
}

.gift-image-grid {
	display: grid;
	grid-template-columns: auto auto auto auto;
	gap: 10px;
	max-width: 100%;
	height: auto;
}

.gift-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media only screen and (max-width: 800px) {
	.gift-image-grid {
		grid-template-columns: auto auto;
	}
}

.gift-ads-lrg {
	display: flex;
	gap: 10px;
	width: 70%;
}

.gift-hor-cont {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.gift-img-lrg {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gift-ads-long {
	margin-top: 10px;
	display: flex;
	gap: 10px;
	flex-direction: column;
	width: 70%;
}

@media only screen and (max-width: 800px) {
	.gift-ads-lrg {
		width: 100%;
		flex-direction: column;
	}

	.gift-ads-long {
		width: 100%;
	}
}

.gift-web {
	display: grid;
	grid-template-columns: auto auto; /* Ensures two equal-width columns */
	width: 100%;
	gap: 10px;
}

.gift-web-cont {
	width: 100%;
	height: 500px; /* Fixed height for the containers */
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden; /* Ensures content does not overflow the container */
	background: #f7ebeb; /* Background color to show behind images */
}

.gift-web-img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain; /* Ensures the image fits within the container */
}

@media only screen and (max-width: 800px) {
	.gift-web {
		grid-template-columns: 1fr; /* Single column layout for smaller screens */
	}
}