body {
    background-color: #FAFAFA !important;
}

:root {
    --default: #18181B;
    --primary: #FA4094;
    --neutral: #3F3F46;
    --neutral-500: #71717A;
}

/* Utility classes */
.font-heading {
    font-family: 'Poppins';
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
}

h1.font-heading,
h2.font-heading {
    margin: 0;
}

.homepage-main-heading {
    margin-bottom: var(--space-4, 16px);
}

.font-body {
    font-family: 'Lato';
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 26px;
    padding: 0;
    margin: 0;
}

.font-body-xsm {
    font-family: 'Lato';
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    padding: 0;
    margin: 0;
}

.font-body-sm {
    font-family: 'Lato';
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    padding: 0;
    margin: 0;
}

.font-body-md {
    font-family: 'Lato';
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    padding: 0;
    margin: 0;
}

.font-link {
    font-family: 'Lato';
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    color: var(--primary);
    text-decoration: none;
    cursor: pointer;
}

.font-link:visited,
.font-link:hover {
    color: #DE116E;
    text-decoration: none;
}

.text-link {
    cursor: pointer !important;
}

.text-default {
    color: var(--default)
}

.text-primary {
    color: var(--primary)
}

.text-neutral {
    color: var(--neutral)
}

.text-neutral-500 {
    color: var(--neutral-500)
}

.ellipsis-2-line,
.ellipsis-1-line {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    white-space: normal;
}

.ellipsis-1-line {
    -webkit-line-clamp: 1;
}

.ellipsis-2-line {
    -webkit-line-clamp: 2;
}



/* GRID BASE: 1 · 2 · 3 (no truncation) */
.grid-base {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: 1fr;
    gap: 16px;
}

@media (min-width: 950px) {
    .grid-base {
        grid-template-columns: repeat(3, 1fr);
    }
}

.grid-base>* {
    height: 100%;
    box-sizing: border-box;
}

/* GRID SMALL: 1 · 2 (no truncation) */
.grid-small {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: 1fr;
    gap: 16px;
}

@media (min-width: 767px) {
    .grid-small {
        grid-template-columns: repeat(2, 1fr);
    }
}

.grid-small>* {
    height: 100%;
    box-sizing: border-box;
}

/* GRID WITH TRUNCATION: 9 · 8 · 6 */
.grid-truncate {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: 1fr;
    gap: 24px;
}

@media (min-width: 767px) {
    .grid-truncate {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 950px) {
    .grid-truncate {
        grid-template-columns: repeat(3, 1fr);
    }
}

.grid-truncate>* {
    display: none !important;
}

.grid-truncate> :nth-child(-n+6) {
    display: flex !important;
}

@media (min-width: 767px) {
    .grid-truncate> :nth-child(-n+8) {
        display: flex !important;
    }
}

@media (min-width: 950px) {
    .grid-truncate> :nth-child(-n+9) {
        display: flex !important;
    }
}

.grid-truncate>* {
    height: 100%;
    box-sizing: border-box;
}



/* GRID WIDE: 1 · 4 · 6 (no truncation) */
.grid-wide {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    gap: 12px;
}

@media (min-width: 767px) {
    .grid-wide {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 950px) {
    .grid-wide {
        grid-template-columns: repeat(6, 1fr);
    }
}

.grid-wide>* {
    height: 100%;
    box-sizing: border-box;
}


/* GRID STANDARD: 1 · 2 · 4 (no truncation) */
.grid-standard {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: 1fr;
    gap: 12px;
}

@media (min-width: 767px) {
    .grid-standard {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

@media (min-width: 950px) {
    .grid-standard {
        grid-template-columns: repeat(4, 1fr);
    }
}

.grid-standard>* {
    height: 100%;
    box-sizing: border-box;
}

.grid-default {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 1rem;
}

@media (max-width: 767px) {
    .grid-default {
        grid-template-columns: 1fr;
    }
}