/* Mobile View */
@media screen and (max-width: 45rem){

body > footer{
float:left;
width:100%;
background:var(--bgr-footer-300);
}

body > footer .card{
margin:.5rem .75rem;
color:var(--clr-footer-300);
}

body > footer .card hgroup,
body > footer .card hgroup > :is(h1,h2,h3,h4,h5,h6),
body > footer .card hgroup > p{
margin:0;
padding:0;
font-size:var(--fs-xs);
color:var(--clr-primary-200);
text-align:center;
}

body > footer .card > section{
text-align:center;
}

}

/* Mobile View > Tablet */
@media screen and (min-width: 45rem) and (max-width: 79.5rem){

body > footer{
float:left;
width:100%;
background:var(--bgr-footer-300);
}

body > footer .card{
margin:.5rem .75rem;
color:var(--clr-footer-300);
}

body > footer .card hgroup,
body > footer .card hgroup > :is(h1,h2,h3,h4,h5,h6),
body > footer .card hgroup > p{
margin:0;
padding:0;
font-size:var(--fs-xs);
color:var(--clr-primary-200);
text-align:center;
}

body > footer .card > section{
text-align:center;
}

}

/* Desktop View */
@media screen and (min-width: 79.5rem){

body > footer{
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
background:var(--bgr-footer-300);
}

body > footer .card{
margin:.5rem 1.5rem;
color:var(--clr-footer-300);
}

body > footer .card hgroup,
body > footer .card hgroup > :is(h1,h2,h3,h4,h5,h6),
body > footer .card hgroup > p{
margin:0;
padding:0;
font-size:var(--fs-xs);
color:var(--clr-primary-200);
text-align:center;
}

body > footer .card > section{
text-align:center;
}

}