<div class="goals">

<p class="title">

<span class="icon" aria-hidden="true">

<Icon name="approve-check-circle" />

</span>

{labels["tutorial.getReady"]}

</p>

<slot />

</div>

<style>

.goals {

--o-color-hue: var(--o-hue-green);

padding: 1rem;

background-color: var(--sl-color-accent-low);

color: var(--sl-color-white);

border-left: 0.25rem solid var(--sl-color-accent);

/* Indicates the aside boundaries for forced colors users, transparent is changed to a solid color */

outline: 1px solid transparent;

}

@media (min-width: 50em) {

.goals {

padding: 1em;

margin-inline: 0;

}

}

@media (min-width: 72em) {

.goals {

font-size: 1.125rem;

}

}

.title {

display: grid;

grid-template-columns: auto 1fr;

gap: 0.5rem;

align-items: center;

line-height: 1;

margin-bottom: 1em;

font-size: 1.125em;

letter-spacing: 0.05em;

font-weight: bold;

text-transform: uppercase;

color: var(--sl-color-accent-high);

}

.icon svg {

width: 1.5em;

height: 1.5em;

vertical-align: middle;

fill: currentcolor;

}

.goals > :global(ul) {

padding-inline-start: 1.5em;

}

.goals > :global(ul > * + *) {

margin-top: 0.5em;

}

</style>