#container_1{
grid-area:container_1;
}

#container_2{
grid-area:container_2;
}

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

#container_1{
display:flex;
justify-content:center;
flex-direction:column;
width:100%;
margin:0;
padding:0;
}

#container_1 .card{
float:left;
width:calc(100% - 1.5rem);
margin:.5rem .75rem 1.5rem .75rem;
border-radius:.5rem;
}


#container_2{
display:flex;
justify-content:center;
flex-direction:column;
width:100%;
margin:0;
padding:0;
}

#container_2 .card{
float:left;
width:calc(100% - 1.5rem);
margin:.5rem .75rem 1.5rem .75rem;
padding:0 0 .75rem 0;
border-radius:.5rem;
background:var(--bgr-accent-300);
}

#container_2 .foreground .content .text p{
text-align:center;
}


}

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

#container_1{
display:flex;
justify-content:center;
flex-direction:column;
width:90%;
margin:1.5rem auto 0 auto;
padding:0;
}

#container_1 .card{
float:left;
width:calc(100% - 1rem);
margin:1.5rem .5rem .5rem .5rem;
padding:.5rem 0 1.5rem 0;
border-radius:.75rem;
}

#container_2{
display:flex;
justify-content:center;
flex-direction:row;
width:100%;
margin:1.5rem 0;
padding:0;
}

#container_2 .card{
float:left;
width:calc(100% - 1rem);
margin:1.5rem .5rem .5rem .5rem;
padding:.5rem 0 .5rem 0;
border-radius:.75rem;
background:var(--bgr-accent-300);
}

}

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

#container_1{
display:flex;
justify-content:center;
flex-direction:row;
width:100%;
margin:1.5rem 0 0 0;
padding:0;
}

#container_1 .card{
display:flex;
justify-content:space-between;
margin:.5rem .5rem;
padding:.5rem .5rem;
min-width:18rem;
width:100%;
max-width:30rem;
border-radius:1.5rem;
}

#container_2{
display:flex;
justify-content:center;
flex-direction:row;
width:100%;
margin:1.5rem 0;
padding:0;
}

#container_2 .card{
float:left;
width:calc(100% - 1rem);
margin:.5rem .5rem 1.5rem .5rem;
padding:.5rem .5rem;
border-radius:.75rem;
background:var(--bgr-accent-300);
}

}

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

#container_2 .foreground{
margin:0;
padding:0;
}

#container_2 .foreground .content{
margin:0;
padding:0;
}

#container_2 .foreground .content .text p{
text-align:center;
}

}

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

#container_1{
display:flex;
justify-content:center;
flex-direction:row;
width:100%;
margin:1.5rem 0 0 0;
padding:0;
}

#container_1 .card{
display:flex;
justify-content:space-between;
margin:.5rem .5rem;
padding:.5rem .5rem;
min-width:18rem;
width:100%;
max-width:30rem;
border-radius:1.5rem;
}


#container_2{
display:flex;
justify-content:center;
flex-direction:row;
width:100%;
margin:1.5rem 0 0 0;
padding:0;
}

#container_2 .card{
display:flex;
justify-content:center;
margin:.5rem .5rem;
padding:.5rem .5rem;
min-width:18rem;
width:100%;
max-width:30rem;
border-radius:1.5rem;
background:var(--bgr-accent-300);
}

#container_2 .card .foreground{
margin:0;
padding:0;
}

#container_2 .card .foreground .content{
margin:0;
padding:0;
}

#container_2 .foreground .content .text p{
text-align:center;
}


}


#container_1 .foreground{
display:block;
width:100%;
}

#container_1 .card{
border:var(--brd-accent-408);
background:var(--bgr-accent-400);
}


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

#container_1 .keyvisual img{
width:100% !important;
height:auto;
}


#container_1 .content{
margin:0 auto 0 auto;
width:95%;
}

#container_1 .content .title{
float:left;
text-align:center;
width:100%;
}

#container_1 .content .title .ol,
#container_1 .content .title .hl,
#container_1 .content .title .sl{
color:var(--clr-primary-100);
}

#container_1 .content .text{
float:left;
width:100%;
margin:.75rem .25rem .25rem .25rem;
}

#container_1 .content .text a{
font-weight:normal;
}




#container_2 .foreground{
display:block;
width:100%;
margin:0;
padding:0;
}

#container_2 .foreground .content{
margin:0 auto 0 auto;
width:100%;
}

#container_2 .foreground .content .title{
float:left;
text-align:center;
width:100%;
}

#container_2 .foreground .content .title .ol,
#container_2 .foreground .content .title .hl,
#container_2 .foreground .content .title .sl{
font-weight:bold;
color:var(--clr-primary-300);
}

#container_2 .foreground .text{
float:left;
width:calc(100% - 2rem);
margin:0 1rem 0 1rem;
}

#container_2 .foreground .text a{
font-weight:normal;
}