:root
{
    --border-radius: em
}

#who-we-are-container
{
	width: 100%;
    display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: stretch;
}

#who-we-are 
{
    flex: 0 0 50%;
}

#partening
{
	flex: 0 0 45%;
    background-color: var(--nl-color-green-tea);    
    border-radius: 1em;
    overflow: hidden;
	display: flex;
	flex-direction: column;
}

#partening-image
{
	flex:1;
    overflow: hidden; /* Hide anything that exceeds this height */
    position: relative; 
    border-radius: var(--border-radius) var(--border-radius) 0 0;    
	aspect-ratio:  125 / 52;
}

#partening img
{
    width: 100%;
    height: auto;
    display: block;    
}

#partening-quote-container
{
	display: flex;
    flex-direction: row;
    padding: 1em 0 1em 0;
}

#big-double-quote
{
    width: auto;
    flex: 0 0 auto;
    font-family: Manrope;
    font-size: var(--nl-font-size-800);
    line-height: 1;
    color: var(--nl-color-neon-green);        
}

#partening-quote
{
	flex: 1;
}

#our-cutting-edge
{
    font-family: Manrope;
    margin-top: 1em;
    font-size: var(--nl-font-size-150);
    font-weight: 300;
}

#core-value-cards {
    margin-top: 3em;
    display: flex;
    justify-content: space-around;    
}

#core-value-cards .card {
    flex: 1;
    margin: 10px;
    max-width: 30%;
    box-sizing: border-box;
    background-color: #f0f0f0;    
}

#core-value-cards .card > *
{
    color: var(--nl-color-charcoal) !important;    
}

#core-value-cards .card > h3
{
    margin-top: var(--nl-size-unit);
    margin-bottom: var(--nl-size-unit);
}

locations
{
    display: flex;
    justify-content: space-between;
}

location
{
    flex: 0 0 40%;
    background-color: white;    
}
location > *
{
    color: var(--nl-color-charcoal) !important;    
}

location img
{
    width: 100%;
}

.person-container
{
    margin-top: 3em;
    display: flex;
    flex-direction: column;

}

.person
{    
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.person:not(:first-of-type)
{    
    margin-top: 2em;
}

.person-image
{
	flex: 0 0 30%;
    aspect-ratio: 10 / 6;
	display: block;
    overflow: hidden; /* Hide anything that exceeds this height */
    position: relative; 
    border-radius: 1em;
    background-color: var(--nl-color-green-tea ); 
}

.person-image img
{
    width: 100%;
}

.person-data
{
	flex: 0 0 65%;
	width:100%;
}

@media screen and (max-width: 1024px)
{
	#who-we-are-container{
		flex-direction: column;
	}
	
	#core-value-cards
	{
		flex-direction: column;
	}
	
	#core-value-cards .card
	{
		max-width: unset;
	}
	
	.person-container
	{
		flex-direction: column;
	}
	
	.person
	{
		flex-direction: column;
	}
	
	locations
	{
		flex-direction: column;
		gap: 1em;
	}
	
	location
	{
		flex: 0 0 95%;
	}
}