@layer components {
.info-list {
    display: flex;
    flex-direction: column;
}

.info-box {
    padding-block: var(--gutter);
    display: grid;
    grid-template-columns: min-content 1fr;
    grid-template-areas:
        "icon header"
        "text text"
        "button button";
    align-items: center;
    gap: calc(var(--gutter) / 2) calc(var(--gutter) / 3);
    grid-auto-rows: min-content;
    row-gap: calc(var(--gutter) / 2);
    /* background: var(--color-selection); */
    border-radius: calc(var(--border-radius) / 3);
    padding-inline: calc(var(--gutter) / 2);
    border: var(--border-line) var(--color-border);
}

.info-box.has-not-button {
    grid-template-areas:
        "icon header"
        "text text";
}

.info-box :where(:is(ol, ul):not([role="list"], [role="tablist"]) > :not(:last-child)) {
    margin-block-end: 0;
}

.info-box .content {
    flex: 1;
}

.info-box .icon-holder {
    grid-area: icon;
    font-size: 4rem;
    line-height: 1;
    min-width: min-content;
}

.info-box header {
    grid-area: header;
}

.info-box .content-text {
    grid-area: text;
}

.info-box header :where(h2, .h2, h3, .h3),
.info-box .header :where(h2, .h2, h3, .h3) {
    padding-block: 0;
    margin-block-end: 0;
}

.info-box :where(h2, .h2, h3, .h3)::after {
    all: initial;
}


.info-box .content-button {
    grid-area: button;
}






.info-box+.info-box.highlighted {
    margin-block-start: var(--gutter);
}



@media (min-width: 540px) {
    .info-box {
        grid-template-areas:
            "icon header"
            "icon text"
            "icon button";
        padding: var(--gutter) 0 var(--gutter) calc(var(--gutter) / 2);
        align-items: flex-start;
    }

    .info-box.has-not-button {
        grid-template-areas:
            "icon header"
            "icon text";
    }
}

@media (min-width: 744px) {
    .info-box {
        gap: var(--gutter);
    }

    .info-box .icon-holder {
        font-size: 6.6rem;
    }

}

@media (min-width: 1260px) {
    .info-box {
        column-gap: calc(var(--gutter) * 2);
        padding-inline-start: calc(var(--gutter) * 1.25);
    }

    .info-box.highlighted {
        padding-inline: calc(var(--gutter) * 1.25);
    }

    .info-box.highlighted+.info-box {
        margin-block-start: var(--gutter);
    }

    .info-box.highlighted:not(:first-child) {
        margin-block-start: calc(var(--gutter) * 2);
    }

}
}