:host {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 25px;
}

.inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: inherit;
}

h1 {
    display: block;
    color: var(--color-title-1);
    font-size: 36px;
    font-weight: 100;
    margin: 0;
}

span {
    display: block;
    font-size: 16px;
    font-weight: 300;
    margin: 0;
    white-space: pre-wrap;
    line-height: 1.5;
}

slot[name='illustration'] > *,
::slotted([slot='illustration']) {
    height: 150px;
    width: 150px;
}

:host([variant='small']) {
    gap: 20px;
}

:host([variant='small']) h1 {
        color: var(--color-text);
        font-size: 22px;
    }

:host([variant='small']) span {
        font-weight: 500;
    }

:host([variant='small']) slot[name='illustration'] > *,
    :host([variant='small']) ::slotted([slot='illustration']) {
        height: 80px;
        width: 80px;
    }

:host([variant='landscape']) {
    flex-direction: row;
    gap: 20px;
}

:host([variant='landscape']) .inner {
        text-align: left;
        align-items: flex-start;
    }

:host([variant='landscape']) h1 {
        color: var(--color-text);
        font-size: 22px;
    }

:host([variant='landscape']) span {
        font-weight: 500;
    }

:host([variant='landscape']) slot[name='illustration'] > *,
    :host([variant='landscape']) ::slotted([slot='illustration']) {
        height: 80px;
        width: 80px;
    }