:where(.component-checklist) {

    container: checklist / inline-size;

    .checklist-item {
        display: grid;
        grid-template-columns: 3rem 1fr;
        gap: var(--size-small);
        padding: var(--size-small);
        font-size: 2.1rem;
        border-top: solid var(--color-medium-grey) 2px;

    }

    .checkmark {
        background-color: var(--color-brand-pale-blue);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center center;
        padding: 0.5rem;
        display: flex;
        place-content: center;
        place-items: center;
        border-radius: 50%;
        aspect-ratio: 1;
        width: 3rem;
        height: 3rem;
    }

    .checklist {
        margin-block: var(--size-medium);
    }

    &.columns-2 {
        .checklist-wrapper {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            justify-content: space-between;
            gap: var(--size-medium);
        }

        .header-and-copy {
            max-width: 42rem;
        }

        .checklist {
            margin-top: 1rem;
        }
    }
}

@media print {
    :where(.component-checklist) {
        &.columns-2 .checklist-wrapper {
            grid-template-columns: 1fr;
        }

        .checklist-item {
            page-break-inside: avoid;
        }
    }
}

@container checklist (width < 100rem) {
    .component-checklist {
        &.columns-2 {
            .checklist-wrapper {
                display: grid;
                grid-template-columns:  1fr;
                justify-content: center;
                align-items: center;
                gap: var(--size-small);
            }

        }
    }
}