.grid.grid-cols-2.gap-1.md\:grid-cols-3 :is(x-avatar,.avatar).avatar-lg {
    width: calc(var(--spacing) * 44);
    height: calc(var(--spacing) * 44);
}
.font-medium {
    font-weight: 300;
}
@media (min-width: 1024px) {
    h1 {
        font-size: 2rem;
        line-height: 1.28571429;
    }
}
#image-generator .preview .bg>div {
    height: calc(100% + 0px);
}
.button-primary {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-primary) / var(--tw-bg-opacity));
    --tw-text-opacity: 1;
    color: rgb(var(--color-contrast-primary) / var(--tw-text-opacity));
    outline-color: rgb(var(--color-primary) / 1);
    color: #ffffff;
    font-size: 18px;
    font-family: 'Manrope', Arial, sans-serif;
    line-height: 1.55;
    font-weight: 400;
    border-radius: 10px 10px 10px 10px;
    background-image: linear-gradient(87deg, rgba(155, 63, 212, 1) 0%, rgba(118, 54, 223, 1) 98%);
    border-color: transparent;
    border-style: solid;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
    box-shadow: 0px 0px 10px 2px rgba(163, 70, 244, 0.3);
}
a.flex.items-center.main {
    background: #8552f2;
    color: #fff;
    text-align: center;
}