.content-grid,
.footer-container,
#card-content,
#process-cards,
.secondary-card-content,
.process-content {
	display: grid;
	grid-template-columns: 1fr 6fr 1fr;
}

@media  (min-width: 1169px) and (max-width: 1400px) {
	.screen-to-portable-1 {
		display: none;
	}

	.screen-to-portable-2 {
		display: block;
		width: 8rem;
	}

	.screen-to-portable-2 img {
		width: 100%;
	}

	#introPara {
		padding-top: 14%;
	}
	
	#card-content {
		width: 75vw;
		grid-template-columns: 1fr 1fr 1fr;
		
		margin-top: 9rem;
	}
	
	#about-length {
		width: 75vw;
	}
	
}

@media (min-width: 961px) {
	#card-content {
		margin-top: 10rem;
	}

	.project-card h2 {
		font-size: 1.2rem;
		padding: 2rem;
		margin-bottom: 5rem;
	}

	#introPara {
		padding-right: 12%;
	}

	.containerC h2 {
		display: none;
	}

	#card-content {
		width: 75vw;
	}

	#introPara {
		padding-top: 10%;
	}

	#about-length {
		width: 75vw;
	}

	#about-layout {
		display: grid;
		grid-template-columns: 1fr 2fr;
	}

	.mobile {
		display: none;
	}

	.screen-to-portable-1 {
		display: block;
	}

	.screen-to-portable-2 {
		display: none;
	}

	.secondary-card-content {
		grid-template-columns: 1fr 1fr 1fr;
	}

	#card-content {
		grid-template-columns: 1fr;
	}
 
	#process-cards {
		grid-template-columns: 1fr 1fr 1fr;
	}

	.index-banner {
		display: none;
	}

	.card {
		margin-top: 2rem;
		width: 100%;
		height: 300px;
	}

	.card p {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
		margin-bottom: 1rem;
		margin-top: 0.5rem;
	}

	.card input {
		right: 0;
		bottom: 0;
		width: 150px;
		margin-bottom: 2rem;
		margin-right: 2rem;
	}

	.card img {
		width: 100%;
		height: 100%;
	}

	.process-content {
		grid-template-columns: 1fr 1fr;
	}

	.span-content {
		grid-column: 1 / span 2;
	}

	.span-full-content {
		grid-column: 1 / span 3;
	}

	.swap1 {
		display: block;
	}

	.swap2 {
		display: none;
	}

	#top-page {
		position: fixed;
		right: 5%;
		top: 70%;
	}

	.project-card {
		border: 1rem;
	}

	#about-layout {
		justify-content: center;
		align-items: center;
	}
}

@media (min-width: 961px) and (max-width: 1168px) {
	.project-card h1 {
		padding-top: 2.5rem;
	}
	
	.project-card h2 {
		display: none;
	}

	.project-card p {
		line-height: 1.7rem;
	}	

	.banner-text h1 {
		font-size: 8rem;
	}

	.secondary-card-content {
		grid-template-columns: 1fr 1fr;
	}

}

@media (min-width: 811px) and (max-width: 960px) {
	.banner-text h1 {
		font-size: 6rem;
	}

	.screen-to-portable-2 img {
		width: 100%;
		height: auto;
	}


	.secondary-card-content {
		grid-template-columns: 1fr;
	}

	.card p {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
		margin-bottom: 1rem;
		margin-top: 0.5rem;
	}

	.mobile {
		display: none;
	}

	.screen-to-portable-1 {
		display: none;
	}

	.screen-to-portable-2 {
		display: flex;
	}

	
	#card-content,
	#process-cards {
		grid-template-columns: 1fr 1fr;
	}

	.index-banner {
		display: none;
	}

	#landing-banner {
		margin-bottom: 0rem;
		z-index: 1
	}

	.process-content {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.image-gallery {
		grid-template-columns: 1fr 1fr;
	}

	.image-gallery .image-box:nth-child(7n+1) {
		grid-column: unset;
		grid-row: unset;
	}

	.swap1 {
		display: block;
	}

	.swap2 {
		display: none;
	} 

	#about-layout {
		display: grid;
		justify-content: center;
		align-items: center;
	}

	#about-layout img {
		justify-self: center;
		margin-bottom: 2rem;
	}

	#top-page {
		position: fixed;
		right: 5%;
		top: 70%;
	}

	.containerA,
	.containerB {
		width: 100%;
	}

	.project-card h1 {
		padding-top: 1rem;
		padding-bottom: -1.7rem;
		padding-left: 1rem;
		font-size: 1.5rem;
	}

	.project-card p {
		padding-top: 0rem;
		padding-left: 1rem;
		padding-right: 0rem;
		margin-right: 1rem;
	}

	.project-card h2 {
		padding-bottom: 2rem;
		display: none;
	}

	.containerA,
	.containerB {
		transform: translateY(90%);
		width: 100%;
		height: 50%;
	}

	.banner-text img {
		margin-left: 1rem;
		padding-right: 6rem;
		margin-top: -2rem;
	}

	.banner-text img {
		margin-bottom: 1rem;
	}

	.hero h1{   
		font-size: 2rem;
		line-height: 3.5rem;
	}
	
	.hero .text {
		position: absolute;
		top: 10vh;
		left: 15vh;
	}

	#hero{
		width: 80%;
		padding-bottom: 0rem;
	}

	#introPara{
		position: relative;
		left: 13%;
		width: 90%;
	}

	#about_content {
		display: grid;
	}
}

@media (max-width: 810px) {
	#contact-icons {    
		bottom: 0;
		top: auto;
		z-index: 60;
	}

	#about_content {
		display: none;
	}
	


	.screen-to-portable-2 img {
		width: 100%;
		height: flex;
	}
	.swap1,
	#about-length,
	.banner-text,
	.about-me {
		display: none;
	}

	.swap2 {
		display: block;
	}


	.mobile-about-content img {
		margin-top: 0vh;;
	}

	.screen-to-portable-1 {
		display: none;
	}

	.screen-to-portable-2 {
		display: flex;
	}


	#landing-banner {
		margin-bottom: 0rem;
		z-index: 1;
	}

	#card-content,
	#process-cards,
	.secondary-card-content {
		grid-template-columns: 1fr;
		margin-top: 2rem;
	}
	
	#navbar {
		width: 100%;
        top: auto;
        bottom: 0;
		justify-content: center;
	}

	.project-card {
		border-radius: 20px;
	}

	#card-content {
		gap: 1rem;
	}

	.process-content {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.image-gallery {
		grid-template-columns: 1fr;
	}

	.image-gallery .image-box:nth-child(7n+1) {
		grid-column: unset;
		grid-row: unset;
	}

	.brand-title {
		display: none;
	}


	h3 {
		font-size: 22.5px;
		letter-spacing: 2px;
	}

	.containerA,
	.containerB {
		transform: translateY(90%);
		width: 100%;
		height: 50%;
	}

	.project-card h1 {
		line-height: 3rem;
		padding-top: 2rem;
		padding-bottom: 1rem;
		padding-left: 1rem;
		font-size: 3rem;
	}

	.project-card p {
		padding-top: 0rem;
		padding-left: 1rem;
		padding-right: 2rem;
		margin-right: 1rem;
	}

	.project-card h2 {
		margin-bottom: -1rem;
		margin-left: 1rem;
	}	
	
	.card p {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
		margin-bottom: 1rem;
		margin-top: 0.5rem;
	}	

	#top-page {
		position: fixed;
		right: 10px;
		top: 54%;
	}

	.hero h1{   
		font-size: 2rem;
		line-height: 3rem;
	}
	
	.hero .text {
		position: absolute;
		top: 5vh;
		left: 11vh;
	}

	#about_content {
		display: none;
	}
	
	
}

@media (max-width: 660px) {
	#about-layout {
		grid-template-columns: 1fr;
	}

	#about-layout img {
		justify-self: center;
		margin-bottom: 2rem;
	}

	.about-content {
		grid-template-columns: 1fr;
	}

	.mobile-about-content {
		grid-template-columns: 1fr;
	}

	#hero{
		width: 80%;
		padding-bottom: 0rem;
	}

	#introPara{
		position: relative;
		left: 13%;
		width: 80%;
	}
	.project-card h1 {
		padding-top: 1rem;
		margin-bottom: 0rem;
		padding-bottom: 0rem;
		padding-left: 1rem;
		font-size: 2rem;
		line-height: 1
	}
	
	#checkerboard {
        grid-template-columns: 1fr; /* Collapse to 2 columns on smaller screens */
    }

	
	#about_content {
		display: none;
	}

	.footer-links {
		display: none;
	}
	z
	.mobile-about-content {
		grid-template-columns: 1fr;
	}
	#about-layout {
		grid-template-columns: 1fr;
	}
	#top-page {
		display: none;
	}

	.hero h1{   
		font-size: 2rem;
		line-height: 2rem;
	}
	
	.hero .text {
		position: absolute;
		top: 4vh;
		left: 8vh;
	}
	
}

@media (min-width: 661px) and (max-width: 1200px) {
	#about-layout {
		grid-template-columns: 1fr;
	}

	#about-layout img {
		justify-self: center;
		margin-bottom: 2rem;
	}

	.about-content {
		grid-template-columns: 1fr;
	}

	.mobile-about-content {
		grid-template-columns: 1fr;
	}

	#hero{
		width: 80%;
		padding-bottom: 0rem;
	}

	#introPara{
		position: relative;
		left: 13%;
		width: 80%;
	}
	
	#checkerboard {
        grid-template-columns: repeat(2, 1fr); /* Collapse to 2 columns on smaller screens */
    }
}

@media (min-width: 1201px) {
	#about_content {
		padding-bottom: 10rem;
	}

	#checkerboard {
        grid-template-columns: repeat(4, 1fr); /* Collapse to 2 columns on smaller screens */
    }
	
}

/* TEXT SIZES */

@media (min-width: 2560px) {
	.containerC h1 {
		font-size: 3rem;
		line-height: 4rem;
	}

	#about_content {
		display: none;
	}

	a, p, .brand-title, h4, h2  {
		font-size: 2rem;
		line-height: 3.5rem;
	}

	p {
		margin-top: 2rem;
	}
	
	.brand-title {
		margin-top: 0.5rem;
	}

	figcaption {
		border-bottom: 3rem;
		font-size: 2rem;
	}

	h2 {
		margin-top: 3rem;
		margin-bottom: 0rem;
		font-size: 3rem;
	}

	h1 {
		margin-top: 2rem;
		padding-bottom: 1.3rem;
		font-size: 4rem;
	}

	#navbar {
		height: 6rem;
	}

	#about-layout h2 {
		font-size: 4rem;
	}

	
}