/* =====================================================
TABLET
===================================================== */

@media (max-width:920px){

.cards{
grid-template-columns:repeat(2,1fr);
}

.footer-row{
flex-direction:column;
}

}


/* =====================================================
MOBILE NAVIGATION
===================================================== */

@media (max-width:820px){

.menu-button{
display:flex;
}

.nav{
display:none;
position:absolute;
right:16px;
top:70px;
flex-direction:column;
gap:8px;
padding:12px;
background:rgba(18,18,18,.96);
border-radius:16px;
}

.nav.open{
display:flex;
}

.cards{
grid-template-columns:1fr;
}

}


/* =====================================================
PHONE LAYOUT
===================================================== */

@media (max-width:768px){

.container{
padding:0 20px;
}

.section{
padding:24px 0;
}

#doctrine .cards{
grid-template-columns:1fr;
}

#doctrine .cards a.card:nth-child(4){
grid-column:auto;
}

#videos .cards{
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}

.resource-card img{
max-width:260px;
}

}