/* @group @variables */

[class*="m-popular-plan-list"] {
--popular-plan-list-grid-template-columns: repeat(1, 1fr);
/*--popular-plan-list-gap: .75rem;*/
--popular-plan-list-gap: 1.125rem;
}

@media all and (min-width: 48em) {

[class*="m-popular-plan-list"] {
--popular-plan-list-grid-template-columns: repeat(2, 1fr);
--popular-plan-list-gap: 1.5rem;
/*--popular-plan-list-gap: 1.5rem var(--popular-plan-list-column-gap);
--popular-plan-list-column-gap: 1.5rem;*/

/*--popular-plan-list-last-odd: span 2;
--popular-plan-list-last-width: calc(50% - (var(--popular-plan-list-column-gap) / 2));*/
}

}

@media all and (min-width: 62em) {

[class*="m-popular-plan-list"] {
--popular-plan-list-grid-template-columns: repeat(3, 1fr);
}

}

/* @end @variables */

/* @group @m-popular-plan-list */

[class*="m-popular-plan-list"] {
display: grid;
justify-content: center;
grid-template-columns: var(--popular-plan-list-grid-template-columns);
gap: var(--popular-plan-list-gap);
}

[class*="m-popular-plan-list"] dl:nth-of-type(2n+1):last-of-type,
[class*="m-popular-plan-list"] li:nth-of-type(2n+1):last-of-type {
/*grid-column-start: var(--popular-plan-list-last-odd);
width: var(--popular-plan-list-last-width);*/

/*margin: auto;*/
}

[class*="m-popular-plan-list"],
[class*="m-popular-plan-list"] li {
margin-bottom: 0;
padding-left: 0;
list-style: none;
}

[class*="m-popular-plan-list"] dl {
display: grid;
grid-auto-flow: row;
align-content: start;
gap: .75rem;
margin-bottom: 0;
}

[class*="m-popular-plan-list"] dd {
word-break: keep-all; overflow-wrap:anywhere;
text-align: center;
}

[class*="m-popular-plan-list"] img {
width: 100%;
height: auto;
border-radius: .5rem;
}

[class*="m-popular-plan-list"] :where(:not(a)) img {
filter: grayscale(1) invert(.2);
}

[class*="m-popular-plan-list"] a img {
/*filter: drop-shadow(0px .25rem .25rem hsl(0deg 0% 20% / 30%));*/
filter: drop-shadow(0px .25rem .25rem hsl(0deg 0% 20% / 20%));
transition: var(--filter-transition);
}

[class*="m-popular-plan-list"] a:hover img,
[class*="m-popular-plan-list"] a:focus img {
/*filter: drop-shadow(0px .25rem .25rem hsl(0deg 0% 0% / 60%));*/
filter: drop-shadow(0px .25rem .25rem hsl(0deg 0% 0% / 40%));
}

[class*="m-popular-plan-list"] dd {
text-align: center;
}

/* @end @m-popular-plan-list */