article {
    --spacing: var(--s0);
    width: 90%;
    max-width: 1200px;
    margin-left: auto!important;
    margin-right: auto!important;
    margin-top: var(--spacing-medium)!important;
}

.navigation {
	--spacing: var(--s0);
    width: 90%;
    max-width: 1200px;
    margin-left: auto!important;
    margin-right: auto!important;
    margin-top: var(--spacing-medium)!important;
}

.nav-subtitle {
	 font-family: var(--font-main);
    font-size: var(--s0);
    text-transform: uppercase;
    letter-spacing: 0.01em;
    margin-bottom: 1.5em;
    font-weight: normal!important;
}

.nav-title {
	font-family: var(--font-main);
    font-size: var(--s7);
    letter-spacing: -0.02em;
    line-height: 0.8;
    position: relative;
    left: -0.08em;
    margin-top: var(--s-1);
    font-weight: normal!important;
}


article .title {
    margin-top: var(--s0);
    font-family: var(--font-main);
    font-size: var(--s7);
    letter-spacing: -0.02em;
    line-height: 0.8;
    position: relative;
    left: -0.08em;
    margin-bottom: 6px;
    clear: none;
    font-weight: normal!important;
}




@media (min-width: 1600px) {
	.site {
    padding-top: 10rem;
}
}

 

@media (min-width: 1480px) {
	article, .navigation {
    width: 85%;
}

}

@media (min-width: 980px) and (max-width: 1479px) {
	article, .navigation {
    
    width: 82%;
}
}



@media (min-width: 800px) and (max-width: 979px) {
	article, .navigation {
    --spacing: var(--s1);
    
}
}

@media (min-width: 980px) {

article, .navigation {
    --spacing: var(--s4);
}
}

@media (min-width: 800px) {
article .img {
    width: 50%;
    margin-right: var(--spacing);
    float: left;
}


article .description {
    margin-left: 0;
}


}

@media (min-width: 500px) and (max-width: 979px) {
	article, .navigation {
    width: 100%;
}
}