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

footer{
float:left;
width:100%;
display:flex;
justify-content:center;
flex-direction:column;
background:var(--bgr-accent-300);
margin:0;
padding:0;
}

footer .card{
float:left;
width:90%;
margin:2.75rem auto .5rem auto;
}

footer .card .foreground{
text-align:center;
}

footer .card .foreground .keyvisual{
display:flex;
justify-content:center;
margin:0 auto 0 auto;
padding:0;
width:7.5rem !important;
height:7.5rem !important;
}

footer .card .foreground .keyvisual img{
width:100% !important;
height:auto;
}

footer .card .title h2{
margin:0 0 .5rem 0;
padding:0;
color:var(--clr-primary-200);
}

footer .card .title h2 .ol{
font-size:var(--fs-m);
}

footer .card .title h2 .hl{
font-size:var(--fs-l);
}

footer .card .title h2 .sl{
font-size:var(--fs-m);
}


}


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


footer{
float:left;
width:100%;
display:flex;
justify-content:center;
flex-direction:column;
background:var(--bgr-accent-300);
margin:0;
padding:0;
}

footer .card{
float:left;
width:90%;
margin:2.75rem auto .5rem auto;
}

footer .card .foreground{
text-align:center;
}

footer .card .foreground .keyvisual{
display:flex;
justify-content:center;
margin:0 auto 0 auto;
padding:0;
width:7.5rem !important;
height:7.5rem !important;
}

footer .card .foreground .keyvisual img{
width:100% !important;
height:auto;
}

footer .card .title h2{
margin:0 0 .5rem 0;
padding:0;
color:var(--clr-primary-200);
}

footer .card .title h2 .ol{
font-size:var(--fs-m);
}

footer .card .title h2 .hl{
font-size:var(--fs-l);
}

footer .card .title h2 .sl{
font-size:var(--fs-m);
}

}


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

footer{
float:left;
width:100%;
display:flex;
justify-content:center;
flex-direction:row;
margin:5rem 0 0 0;
padding:0;
}

footer .card{
display:flex;
justify-content:space-between;
margin:-3.75rem 1.5rem .5rem 1.5rem;
padding:.5rem .5rem;
width:calc(100% - 1rem);
}

}


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

footer{
background:var(--bgr-accent-300);
}

footer .card .foreground{
text-align:center;
}

footer .card .keyvisual{
display:flex;
justify-content:center;
margin:0 auto 0 auto;
padding:0;
width:7.5rem !important;
height:7.5rem !important;
}

footer .card .keyvisual img{
width:100% !important;
height:auto;
}

footer .card .title h2{
margin:0 0 .5rem 0;
padding:0;
color:var(--clr-primary-200);
}

footer .card .title h2 .ol{
font-size:var(--fs-m);
}

footer .card .title h2 .hl{
font-size:var(--fs-l);
}

footer .card .title h2 .sl{
font-size:var(--fs-m);
}

}


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

footer{
float:left;
width:100%;
min-height:12rem;
display:flex;
justify-content:space-around;
background:var(--bgr-accent-300);
margin:5rem 0 0 0;
padding:0;
}

footer .card{
float:left;
width:100%;
min-width:18rem;
max-width:30rem;
margin:-3.75rem 1.5rem .5rem 1.5rem;
}

footer .card .foreground{
text-align:center;
}

footer .card .keyvisual{
display:flex;
justify-content:center;
margin:0 auto 0 auto;
padding:0;
width:7.5rem !important;
height:7.5rem !important;
}

footer .card .keyvisual img{
width:100% !important;
height:auto;
}

footer .card .title h2{
margin:0 0 .5rem 0;
padding:0;
color:var(--clr-primary-200);
}

footer .card .title h2 .ol{
font-size:var(--fs-m);
}

footer .card .title h2 .hl{
font-size:var(--fs-m);
}

footer .card .title h2 .sl{
font-size:var(--fs-m);
}

}