/*=====  Typography  =====*/

/*== 1400, 1200, 992, 768, 576 ==*/
/*  https://getbootstrap.com/docs/5.0/layout/breakpoints/  */

@media (max-width: 1200px){

}

@media (max-width: 992px){
	.typo-display-xl-regular, .typo-display-xl-medium, .typo-display-xl-bold, .typo-display-xl-black{
		font-size: 4rem;
		line-height: 1.25em;
	}

	.typo-display-l-regular, .typo-display-l-medium, .typo-display-l-bold, .typo-display-l-black{
		font-size: 3rem;
	}

	.typo-display-m-regular, .typo-display-m-medium, .typo-display-m-bold, .typo-display-m-black{
		font-size: 1.8rem;
	}
}

@media (max-width: 768px){
	.typo-display-xl-regular, .typo-display-xl-medium, .typo-display-xl-bold, .typo-display-xl-black{
		font-size: 3.5rem;
		line-height: 1.25em;
	}

	.typo-display-l-regular, .typo-display-l-medium, .typo-display-l-bold, .typo-display-l-black{
		font-size: 2.5rem;
	}
	.typo-description{
		font-size: 1rem;
	}
}

@media (max-width: 576px){
	.typo-display-xl-regular, .typo-display-xl-medium, .typo-display-xl-bold, .typo-display-xl-black{
		font-size: 3rem;
	}
}


/*===== SECTION HEADER  =====*/
@media (max-width: 992px){
	.section-header{
		height: auto;
		margin-bottom: 60px;
	}

	.section-header-eyebrow{
		margin-bottom: .5rem;
		font-size: 1rem;
	}

	.section-header-headline{
		margin-bottom: 2rem;
	}
}

@media (max-width: 576px){
	.section-header{
		margin-bottom: 40px;
	}
}





/*=====  SPACERS  =====*/

@media (max-width: 992px){
	.spacer-140{
		height: 120px;
	}
	.spacer-100{
		height: 75px;
	}
}

/*=====  DESIGN SYSTEMS  =====*/

@media (max-width: 992px){
	section#design-systems #ds-ani{
		padding-left: 15px;
	}
}

@media (max-width: 768px){
	section#design-systems{
		padding: 60px 15px;
	}
}

@media (max-width: 576px){
	section#design-systems #ds-ani{
		gap: .5rem;
	}
	section#design-systems #ds-ani-col-2{
		gap: .5rem;
	}
	section#design-systems #ds-ani-icon{
		height: 52px;
	}
}


/*=====  MULTI-PURPOSE APPS  =====*/

@media (max-width: 992px){
	section#multi-platform-apps #mpa-ani{
		padding-left: 15px;
	}
}

@media (max-width: 768px){
	section#multi-platform-apps{
		padding: 0 15px;
	}
}

@media (max-width: 576px){
	section#multi-platform-apps #mpa-ani-header img{
		display: none;
	}
	section#multi-platform-apps .mpa-ani-breakpoint{
		font-size: .375rem;
	}
}





/*=====  PRINCIPLES  =====*/

@media (max-width: 992px){
	section#principles .section-header{
		padding-top: calc(60px + 7.5rem);
		padding-bottom: 20px;
	}

	section#principles .pri-block{
		padding: 32px 24px;
	}
}

@media (max-width: 768px){
	section#principles .section-header{
		padding-left: 15px;
	}

	section#principles .pri-block{
		padding: 32px 30px;
		border: none;
	}
	section#principles .pri-block:nth-child(1){
		padding-top: 0;
	}
	section#principles .pri-block:nth-child(2){
		border: none;
	}
	section#principles .pri-block-title{
		margin-bottom: 1rem;
	}
}


/*=====  NEXT SECTION  =====*/
@media (max-width: 768px){
	section.next-section .container{
		padding-left: 30px;
		padding-right: 30px;
	}
}


/*=====  LATEST WORKS  =====*/
@media (max-width: 992px){
	section#latest-work #osc #osc-circle{
		gap: 8px;
	}
}


@media (max-width: 768px){
	section#latest-work .lw-text{
		gap: 1rem;
		margin-bottom: 40px;
		padding-right: 15px;
	}
	section#latest-work #random .lw-text{
		margin-bottom: 0;
	}
	section#latest-work .container{
		padding-left: 30px;
		padding-right: 30px;
	}
}

@media (max-width: 576px){
	section#latest-work .lw-text-btn{
		display: none;
	}
	section#latest-work #lw-text-btn-random{
		display: unset;
	}
}