/* v.1.3.0 */
/* Inspired by images of sites when searching, and what the landing page should look like. */

.lTwoCardList {
display: grid;
grid-template-columns: auto auto;
grid-gap: 15px;
justify-content: space-around;
}

.lTwoCardDiv {
width: 100%;
max-width: 400px;
min-height: 250px;
display: flex;
align-items: center;
justify-content: center;
}

.lTwoCardDiv form, .lTwoCardDiv input { width: 350px; max-width: 100%; }

@media(max-width: 550px) { .lTwoCardList { display: block; width: 100%; }}
@media(max-width: 550px) { .lTwoCardDiv { min-height: 0px; display: block; margin: 0 auto; margin-top: 35px; }}

.lTwoCardDiv img { border-radius: 15px; width: 100%; max-width: 250px; }


.lPriceList {
display: flex;
flex: 1 0 auto;
flex-wrap: wrap;
gap: 10px;

justify-content: center;
justify-content: space-evenly;
}

.lPriceListDiv {
display: flex;
flex-basis: auto;
flex-direction: column;
min-height: 100%; 

width: 100%;
max-width: 200px;
gap: 0;
}

.lPriceListDesc { flex: 1 0 auto; }
.lPriceListPrice { flex-shrink: 0; }

@media(max-width: 400px)  {
.lPriceList { display: block; width: 100%; }
.lPriceListDiv {  display: block; width: 100%; margin: 10px auto; }
}

.lPriceListDiv img {
border-radius: 5px;
}

@media (prefers-color-scheme: light) {
body{
background-image: url("../../../img/tpl/bg.svg");
background-repeat: repeat;
background-attachment: fixed;
}
}

@media (prefers-color-scheme: dark) {
body{
background-image: url("../../../img/tpl/bg-dark.svg");
background-repeat: repeat;
background-attachment: fixed;
}
}