/* -------------------------------------------------------- */


/* @group @m-area-school-list */

[class*="m-area-school-list"] {
display: grid;
grid-auto-flow: row;
gap: 1px;
padding-left: 0;
background-color: hsl(225deg 5% 85%);
list-style: none;
}

[class*="m-area-school-list"]>li {
display: grid;
background-color: var(--color-white);
}

/* @end @m-area-school-list */

/* @group @a-link-area-school */

[class*="a-link-area-school"] {
display: grid;
align-items: center;
padding: .75rem;
text-decoration: none;
color: var(--color-text);
}

[class*="a-link-area-school"]:hover,
[class*="a-link-area-school"]:focus {
color: var(--color-text-action);
}

/* @end @a-link-area-school */

/* @group @a-area-school-name */

[class*="a-area-school-name"] {
display: grid;
justify-content: start;
grid-auto-flow: column;
margin-bottom: 0;
gap: .75rem;
}

[class*="a-area-school-name"] dt {
align-self: start;
display: grid;
place-items: center;
width: 4.5rem;
height: 1.5rem;
background-color: hsl(198deg 59% 60%);
border-radius: .75rem;
font-size: .75rem;
color: var(--color-white);
}

:where(a [class*="a-area-school-name"]) dd {
border-bottom: 1px solid transparent;
color: var(--color-text);
transition: var(--link-primero-transition);
}

:where(a:hover [class*="a-area-school-name"]) dd,
:where(a:focus [class*="a-area-school-name"]) dd {
border-bottom-color: var(--color-text-action);
color: var(--color-text-action);
}

/* @end @a-area-school-name */