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



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

/* @group @variables */

[class*="a-fellow-pickup"] {
--head-3-font-size: 1.25rem;
--head-3-line-height: 1.5;
--head-3-font-weight: 600;
--head-3-color: var(--color-text);
--head-4-font-size: 1rem;
--head-4-line-height: 1.5;
--head-4-font-weight: 600;
--head-4-color: var(--color-text);
--color: var(--color-text);
--ordered-list-detail-padding-left: 1.875rem;
--ordered-list-detail-counter-width: 1.125rem;
}

/* @end @variables */

/* @group @a-fellow-pickup */

[class*="a-fellow-pickup"] {
display: grid;
grid-auto-flow: row;
gap: 1.125rem;
padding: 1.125rem;
background-color: var(--color-white);
}


[class*="a-service-list"] {
position: relative;
display: grid;
grid-auto-flow: row;
gap: .375rem;
align-content: start;
counter-reset: li-entry;
}

[class*="a-service-detail"] {
position: relative;
display: grid;
grid-auto-flow: row;
gap: .375rem;
counter-increment: li-entry;
padding-left: 2.625rem;
}

[class*="a-service-detail"]:before {
box-sizing: border-box;
content: counter(li-entry);
position: absolute;
top: 0;
bottom: 0;
left: 0;
display: grid;
place-items: center;
width: 1.875rem;
height: 1.875rem;
background-color: var(--color-primary);
font-family: var(--font-family-heading);
color: var(--color-white);
font-weight: 500;
font-variation-settings: "wght" 500;
border-radius: 50%;
speak: none;
}

/* @end @a-fellow-pickup */

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

/* @group @variables */

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

@media (width < 50em) { /* 0 -> 799px */

[class*="a-blog-list-pager"] {
--blog-list-pager-grid-row: 1fr 1fr;
--prev-post-box-shadow: 0 1px 0 0 hsl(220deg 5% 85%);
--next-post-box-shadow: 0 -1px 0 0 hsl(220deg 5% 85%);
}

}

@media (width >= 50em) { /* 800px -> * */

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

}

/* @end @variables */

/* @group @m-article-list */

[class*="m-article-list"] {
display: grid;
grid-template-columns: var(--grid-template-columns);
grid-template-rows: var(--grid-template-rows);
gap: 1.5rem;
}

/* @end @m-blog-list */

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

/* @group @variables */

[class*="m-blog-link"] {
--head-3-color: hsl(0deg 0% 20%);
--color: hsl(0deg 0% 20%);
}

[class*="a-blog-title"] {
--head-3-font-size: 1.25rem;
--head-3-line-height: 1.5;
--head-3-font-weight: 600;
}

[class*="a-blog-date"] {
--font-size: .75rem;
}

/* @end @variables */

/* @group @m-blog-link */

[class*="m-blog-link"] {
overflow: clip;
display: grid;
grid-template-columns: .75rem 1fr .75rem;
grid-template-rows: auto .75rem auto .75rem auto .75rem 1fr 1.5rem;
}

[class*="a-blog-media"] {
grid-column: 1 / span 3;
grid-row: 1;
}

[class*="a-blog-title"] {
grid-column: 2;
grid-row: 5;
}

[class*="a-blog-date"] {
grid-column: 2;
grid-row: 3;
}

[class*="a-blog-overview"] {
grid-column: 2;
grid-row: 7;
}

/* @end @m-blog-link */

/* @group @m-blog-link */

[class*="m-blog-link"] {
background-color: var(--color-white);
border: 1px solid hsl(0deg 0% 90%);
border-radius: .5rem;
color: hsl(0deg 0% 20%);
text-decoration: none;
filter: drop-shadow(0px .25rem .25rem hsl(0deg 0% 20% / 20%));
transition: filter .3s 0s cubic-bezier(.6, .5, .5, .75);
}

[class*="m-blog-link"] a:hover,
[class*="m-blog-link"] a:focus {
filter: drop-shadow(0px .375rem .375rem hsl(0deg 0% 0% / 40%));
}

/* @end @m-blog-link */

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

/* @group @variables */

[class*="a-blog-overview"] {
--font-size: .875rem;
--line-height: 1.71428571;
}

/* @end @variables */

/* @group @a-blog-overview */

/* @end @a-blog-overview */

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

/* @group @a-blog-media */

[class*="a-blog-media"] {
overflow: hidden;
width: 100%;
height: 12rem;
}

[class*="a-blog-media"] img {
display: block;
width: 100%;
height: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
object-position: center center;
transition: var(--transform-transition);
}

a:hover [class*="a-blog-media"] img,
a:focus [class*="a-blog-media"] img {
transform: scale(1.05);
}

/* @end @a-blog-media */