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

/* @group @m-proceed-list */

[class*="m-proceed-list"] {
display: grid;
grid-auto-flow: row;
gap: 2.625rem;
}

/* @end @m-proceed-list */

/* @group @m-proceed-list */

[class*="m-proceed-list"] {
counter-reset: li-entry;
}

[class*="m-proceed-detail"] {
counter-increment: li-entry;
}

[class*="a-proceed-label"]:before {
content: counter(li-entry);
}

/* @end @m-proceed-list */

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

/* @group @variables */

[class*="m-proceed-detail"] {
--proceed-detail-grid-template-columns: 1fr;
--proceed-detail-gap: .375rem 1.5rem;
--proceed-media-grid-column: 1;
--proceed-media-grid-row: 1;
--proceed-label-grid-column: 1;
--proceed-label-grid-row: 2;
--proceed-overview-grid-column: 1;
--proceed-overview-grid-row: 3;
--head-3-font-family: var(--font-family-heading);
--head-3-font-size: clamp(1.25rem, 1.131rem + 0.6vw, 1.5rem);/* 24-30 to 320-992 */
--head-3-font-weight: 600;
}

@media (width >= 48em) { /* 768px -> * */

[class*="m-proceed-detail"] {
--proceed-detail-grid-template-columns: 12rem 1fr;
--proceed-detail-grid-template-rows: auto auto;
--proceed-media-grid-column: 1;
--proceed-media-grid-row: 1 / span 2;
--proceed-label-grid-column: 2;
--proceed-label-grid-row: 1;
--proceed-overview-grid-column: 2;
--proceed-overview-grid-row: 2;
}

}

/* @end @variables */

/* @group @m-proceed-detail */

[class*="m-proceed-detail"] {
display: grid;
grid-template-columns: var(--proceed-detail-grid-template-columns);
grid-template-rows: var(--proceed-detail-grid-template-rows);
gap: var(--proceed-detail-gap);
}

[class*="a-proceed-media"] {
grid-column: var(--proceed-media-grid-column);
grid-row: var(--proceed-media-grid-row);
}

[class*="a-proceed-label"] {
grid-column: var(--proceed-label-grid-column);
grid-row: var(--proceed-label-grid-row);
}

[class*="a-proceed-overview"] {
grid-column: var(--proceed-overview-grid-column);
grid-row: var(--proceed-overview-grid-row);
}

/* @end @m-proceed-detail */
 
/* @group @m-proceed-detail */

[class*="m-proceed-detail"] {
position: relative;
padding: .75rem;
background-color: hsl(234.2deg 24.6% 95%);
border-radius: .5rem;
}

[class*="m-proceed-detail"]:not(:last-of-type):before {
content: '';
position: absolute;
bottom: -1.875rem;
left: 50%;
width: 1.875rem;
height: 1.125rem;
background-color: hsl(234.2deg 24.6% 95%);
transform: translateX(-50%);
clip-path: polygon(0 0, 50% 100%, 100% 0);
}

/* @end @m-proceed-detail */

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

/* @group @a-proceed-media */

:where([class*="a-proceed-media"]) img {
width: 100%;
border-radius: .375rem;
}

/* @end @a-proceed-media */

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

/* @group @a-proceed-overview */

[class*="a-proceed-overview"] {
display: grid;
align-content: start;
grid-auto-flow: row;
gap: .75rem;
}

/* @end @a-proceed-overview */

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

/* @group @a-proceed-label */

[class*="a-proceed-label"] {
display: grid;
justify-content: start;
align-items: center;
grid-auto-flow: column;
gap: .75rem;
}

[class*="a-proceed-label"]:before {
display: grid;
place-items: center;
width: 2.25rem;
height: 2.25rem;
background-color: var(--color-primary);
border-radius: 99rem;
color: var(--color-white);
font-size: 1.25rem;
line-height: 1.2;
text-align: center;
}

/* @end @a-proceed-label */

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

/* @group @m-point-list */

[class*="m-point-list"] {
counter-reset: li-entry;
}

[class*="m-point-detail"] {
counter-increment: li-entry;
}

[class*="a-point-count"]:after {
content: counter(li-entry);
}

/* @end @m-point-list */

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

/* @group @variables */

[class*="m-point-detail"] {
--head-3-font-family: var(--font-family-heading);
--head-3-font-size: clamp(1.25rem, 1.131rem + 0.6vw, 1.5rem);/* 24-30 to 320-992 */
--head-3-font-weight: 600;
--head-3-text-align: center;
--head-3-color: var(--color-primary);
}

/* @end @variables */

/* @group @m-point-detail */

[class*="m-point-detail"] {
display: grid;
grid-auto-flow: row;
gap: .75rem;
}

/* @end @m-point-detail */

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

/* @group @a-profile-portrait */

:where([class*="a-point-media"]) img {
width: 100%;
}

/* @end @a-profile-portrait */

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

/* @group @a-point-overview */

[class*="a-point-overview"] {
display: grid;
align-content: start;
grid-auto-flow: row;
gap: .75rem;
}

/* @end @a-point-overview */

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

/* @group @a-point-label */

[class*="a-point-label"] {
display: grid;
justify-content: start;
align-items: center;
grid-auto-flow: column;
gap: .75rem;
}

/* @end @a-point-label */

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

/* @group @a-point-count */

[class*="a-point-count"] {
display: grid;
place-content: center;
width: 4.5rem;
height: 4.5rem;
margin-inline: auto;
background-color: var(--color-primary);
border-radius: 99rem;
color: var(--color-white);
font-size: .625rem;
line-height: 1.8;
font-weight: 500;
text-align: center;
text-transform: uppercase;
}

[class*="a-point-count"]:after {
font-size: 1.25rem;
line-height: 1;
}

/* @end @a-point-count */

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

/* @group @m-planning-list */

[class*="m-planning-list"] {
display: grid;
grid-auto-flow: row;
gap: 2.625rem;
}

/* @end @m-planning-list */

/* @group @m-planning-list */

[class*="m-planning-list"] {
counter-reset: li-entry;
}

[class*="m-planning-detail"] {
counter-increment: li-entry;
}

[class*="a-planning-label"]:before {
content: counter(li-entry);
}

/* @end @m-planning-list */

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

/* @group @m-planning-detail */

[class*="m-planning-detail"] {
display: grid;
grid-auto-flow: row;
gap: .75rem;
}

/* @end @m-planning-detail */
 
/* @group @m-planning-detail */

[class*="m-planning-detail"] {
position: relative;
padding: .75rem;
background-color: hsl(234.2deg 24.6% 95%);
border-radius: .5rem;
}

[class*="m-planning-detail"]:not(:last-of-type):before {
content: '';
position: absolute;
bottom: -1.875rem;
left: 50%;
width: 1.875rem;
height: 1.125rem;
background-color: hsl(234.2deg 24.6% 95%);
transform: translateX(-50%);
clip-path: polygon(0 0, 50% 100%, 100% 0);
}

/* @end @m-planning-detail */

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

/* @group @a-planning-overview */

[class*="a-planning-overview"] {
display: grid;
align-content: start;
grid-auto-flow: row;
gap: .75rem;
}

/* @end @a-planning-overview */

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

/* @group @a-planning-label */

[class*="a-planning-label"] {
display: grid;
justify-content: start;
align-items: center;
grid-auto-flow: column;
gap: .75rem;
}

[class*="a-planning-label"]:before {
display: grid;
place-items: center;
width: 2.25rem;
height: 2.25rem;
background-color: var(--color-primary);
border-radius: 99rem;
color: var(--color-white);
font-size: 1.25rem;
line-height: 1.2;
text-align: center;
}

/* @end @a-planning-label */