:root {

    /* ======================================================
       BRAND
       ====================================================== */

    --primary-color: #F7931A;
    --primary-dark: #D97A00;
    --primary-light: #FFF1DF;

    /* ======================================================
       BACKGROUND
       ====================================================== */

    --background-color: #F8F9FB;
    --surface-color: #FFFFFF;

    /* ======================================================
       TESTO
       ====================================================== */

    --text-primary: #1F2937;
    --text-secondary: #6B7280;

    /* ======================================================
       BORDI
       ====================================================== */

    --border-color: #E5E7EB;

    /* ======================================================
       OMBRE
       ====================================================== */

    --shadow-soft: 0 .25rem 1rem rgba(15,23,42,.08);

    /* ======================================================
       BORDER RADIUS
       ====================================================== */

    --radius-sm: .50rem;
    --radius-md: .75rem;
    --radius-lg: 1rem;

    /* ======================================================
       SPAZIATURE
       ====================================================== */

    --space-xs: .5rem;
    --space-sm: .75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;

    /* ======================================================
   LAYOUT
   ====================================================== */

    --page-max-width: 72rem;

}

/* ==========================================================
   Normalizzazione globale
   ========================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 2rem 1rem;
    font-family: Arial, sans-serif;
    text-align: center;
    color: var(--text-primary);
    background-color: var(--background-color);
}

h1 {
    font-size: 40px;
}

button,
select,
input,
textarea {
    font: inherit;
}

button {
    margin: 0;
    cursor: pointer;
}

button,
select {
    -webkit-tap-highlight-color: transparent;
}

button:disabled,
select:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

/* ==========================================================
   HOME PAGE
   ========================================================== */


/* ==========================================================
   Layout pagina
   ========================================================== */

.home-page {

    width:
        100%;

    max-width:
        var(--page-max-width);

    margin:
        0
        auto;

}

/* ==========================================================
   Layout pagine giochi
   ========================================================== */

.lotto-statistics-page,
.superenalotto-statistics-page,
.laboratory-page {

    width:
        100%;

    max-width:
        var(--page-max-width);

    margin:
        0
        auto;

}

/* ==========================================================
   Intestazione
   ========================================================== */

.home-header {

    text-align: center;

}

.home-header__title {

    margin: 0;

    color: var(--text-primary);

}

.home-header__subtitle {

    margin: var(--space-md) 0 0;

    font-size: clamp(1.5rem, 3vw, 1.875rem);
    font-weight: 700;

    color: var(--primary-dark);

}

.home-header__description {

    max-width: 52rem;

    margin: var(--space-sm) auto 0;

    line-height: 1.6;

    color: var(--text-secondary);

}

.home-account {

    display: flex;

    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: var(--space-sm);

    margin-top: var(--space-md);

}


.home-account__user {

    font-weight: 600;

    color: var(--text-primary);

}


.home-account__laboratory-access {

    font-size: 0.875rem;

    color: var(--text-secondary);

}

/* ==========================================================
   Account Panel
   ========================================================== */

.account-panel {

    width: 100%;

    margin-top:
        var(--space-lg);

    background:
        var(--surface-color);

    border:
        1px solid
        var(--border-color);

    border-radius:
        var(--radius-lg);

    box-shadow:
        var(--shadow-soft);

    overflow:
        hidden;

}


.account-panel__summary {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        var(--space-md);

    padding:
        var(--space-sm)
        var(--space-lg);

    cursor:
        pointer;

    list-style:
        none;

    text-align:
        left;

}

.account-panel__summary::-webkit-details-marker {

    display:
        none;

}

.account-panel__identity {

    min-width:
        0;

    font-weight:
        600;

    color:
        var(--text-secondary);

    overflow-wrap:
        anywhere;

}

.account-panel__identity-mobile {

    display:
        none;

}

.account-panel__email {

    display:
        none;

}

.account-panel__toggle {

    flex:
        0 0 auto;

    font-weight:
        600;

    color:
        var(--primary-dark);

}

.account-panel__toggle::after {

    content:
        "▾";

    margin-left:
        0.35rem;

}


.account-panel[open]
.account-panel__toggle::after {

    content:
        "▴";

}

.account-panel__content {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    flex-wrap:
        wrap;

    gap:
        var(--space-md);

    padding:
        var(--space-md)
        var(--space-lg);

    border-top:
        1px solid
        var(--border-color);

    text-align:
        left;
		
	background-color:
        var(--background-color);

}

.account-panel__status {

    flex:
        1 1 auto;

    margin:
        0;

    color:
        var(--text-secondary);

}

.account-panel__content .btn {

    flex:
        0 0 auto;
		
	min-width:
        7rem;

}

.app-logo {
    display: block;

    width: min(28rem, 90%);
    height: auto;

    margin: 0 auto;
}

/* ============================================================
 * Pagina Account
 * ============================================================ */

.account-page {

    --page-max-width: 72rem;

}

.account-page .lotto-page-navigation {

    margin-top:
        var(--space-md);

    margin-bottom:
        var(--space-lg);

}

/* ==========================================================
   Account - Collegamenti alle Statistiche
   ========================================================== */

.account-statistics-navigation {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        var(--space-xs);

    margin:
        calc(var(--space-lg) * -0.5)
        0
        var(--space-lg);

}


.account-statistics-navigation__label {

    margin:
        0;

    font-size:
        0.875rem;

    font-weight:
        600;

    color:
        var(--text-secondary);

}


.account-statistics-navigation__links {

    display:
        flex;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        var(--space-xs);

}


.account-statistics-navigation__link {

    min-height:
        2.4rem;

    padding:
        0.45rem
        0.85rem;

    font-size:
        0.875rem;

}

.account-page__grid {

    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(0, 0.85fr);

    gap: var(--space-md);

}

.account-page__grid > .card {

    margin: 0;

}

.account-page__grid > .card:last-child {

    grid-column:
        1 / -1;

}

.account-summary {

    max-width: 28rem;
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    gap: 0.75rem;

}

.account-summary__row {

    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;

    padding-bottom: 0.75rem;

    border-bottom: 1px solid rgba(15, 23, 42, 0.08);

}

.account-summary__row:last-child {

    padding-bottom: 0;
    border-bottom: 0;

}

.account-summary__label {

    font-weight: 700;
    color: #132238;

}

.account-summary__value {

    text-align: right;
    color: #5b6472;
    word-break: break-word;

}

.account-subscription-promo {

    max-width:
        28rem;

    margin:
        var(--space-lg)
        auto
        0;

    padding:
        var(--space-md);

    text-align:
        left;

    background-color:
        var(--primary-light);

    border:
        1px solid
        var(--border-color);

    border-radius:
        var(--radius-md);

}


.account-subscription-promo__title {

    margin:
        0;

    font-size:
        1rem;

    color:
        var(--primary-dark);

}


.account-subscription-promo__description {

    margin:
        var(--space-xs)
        0
        var(--space-md);

    line-height:
        1.55;

    color:
        var(--text-secondary);

}


.account-subscription-promo .btn {

    width:
        100%;

}

.account-section__actions {

    max-width: 28rem;
    margin: 1rem auto 0;

    display: flex;
    justify-content: flex-start;

}

.account-page #accountPasswordForm {

    max-width: 28rem;
    margin: 0 auto;

}

.account-page #accountPasswordStatus {

    margin-top: 0.75rem;

}

/* ==========================================================
   Account - Statistiche seguite
   ========================================================== */

.account-tracked-statistics {

    margin-top:
        var(--space-md);

    text-align:
        left;

}


#accountTrackedStatisticsStatus {

    margin:
        0
        0
        var(--space-md);

    padding:
        var(--space-sm)
        var(--space-md);

    font-size:
        1rem;

    font-weight:
        600;

    line-height:
        1.5;

    text-align:
        center;

    color:
        var(--text-secondary);

    background-color:
        var(--background-color);

    border:
        1px solid
        var(--border-color);

    border-radius:
        var(--radius-md);

}


.account-tracked-statistics__game {

    padding:
        var(--space-md)
        0;

    border-bottom:
        1px solid
        var(--border-color);

}


.account-tracked-statistics__game:first-child {

    padding-top:
        0;

}


.account-tracked-statistics__game:last-child {

    padding-bottom:
        0;

    border-bottom:
        0;

}


.account-tracked-statistics__game-title {

    margin:
        0
        0
        var(--space-md);

    font-size:
        1.2rem;

    color:
        var(--primary-dark);

}


.account-tracked-statistics__wheel-title {

    margin:
        var(--space-md)
        0
        var(--space-sm);

    font-size:
        1rem;

    color:
        var(--text-primary);

}


.account-tracked-statistics__category {

    margin-top:
        var(--space-md);

}


.account-tracked-statistics__category:first-of-type {

    margin-top:
        0;

}


.account-tracked-statistics__category-title {

    margin:
        0
        0
        var(--space-xs);

    font-size:
        0.9375rem;

    color:
        var(--text-secondary);

}


.account-tracked-statistics__list {

    display:
        flex;

    flex-direction:
        column;

    gap:
        var(--space-sm);

    margin:
        0;

    padding:
        0;

    list-style:
        none;

}


.account-tracked-statistics__item {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        stretch;

    gap:
        var(--space-sm);

    padding:
        var(--space-md);

    border:
        1px solid
        var(--border-color);

    border-left-width:
        0.3rem;

    border-radius:
        var(--radius-md);

    background-color:
        var(--surface-color);

}


.account-tracked-statistics__item[data-status="active"] {

    border-left-color:
        #2e8b57;

    background-color:
        #f5fbf7;

}


.account-tracked-statistics__item[data-status="verified"] {

    border-left-color:
        #b33a3a;

    background-color:
        #fff7f7;

}


.account-tracked-statistics__item-main {

    display:
        flex;

    flex-direction:
        column;

    gap:
        0.2rem;

    min-width:
        0;

}


.account-tracked-statistics__item-main strong {

    color:
        var(--text-primary);

    overflow-wrap:
        anywhere;

}


.account-tracked-statistics__item-main span {

    font-size:
        0.875rem;

    color:
        var(--text-secondary);

    overflow-wrap:
        anywhere;

}


.account-tracked-statistics__status {

    align-self:
        flex-start;

    padding:
        0.3rem
        0.6rem;

    font-size:
        0.8125rem;

    font-weight:
        700;

    line-height:
        1.2;

    border-radius:
        999rem;

}


.account-tracked-statistics__item[data-status="active"]
.account-tracked-statistics__status {

    color:
        #1f6b43;

    background-color:
        #dff3e7;

}


.account-tracked-statistics__item[data-status="verified"]
.account-tracked-statistics__status {

    color:
        #8f2929;

    background-color:
        #f8dddd;

}

.account-tracked-statistics__item-actions {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        var(--space-sm);

}


.account-tracked-statistics__remove {

    min-height:
        2.25rem;

    padding:
        0.4rem
        0.75rem;

    font-size:
        0.8125rem;

}

/* ==========================================================
   Account - Conferma rimozione
   ========================================================== */

.account-confirm-dialog {

    width:
        min(30rem, calc(100% - 2rem));

    padding:
        0;

    color:
        var(--text-primary);

    background-color:
        var(--surface-color);

    border:
        1px solid
        var(--border-color);

    border-radius:
        var(--radius-lg);

    box-shadow:
        0 1rem 3rem
        rgba(15, 23, 42, 0.2);

}


.account-confirm-dialog::backdrop {

    background-color:
        rgba(15, 23, 42, 0.55);

}


.account-confirm-dialog__content {

    padding:
        var(--space-lg);

    text-align:
        left;

}


.account-confirm-dialog__title {

    margin:
        0;

    font-size:
        1.25rem;

    color:
        var(--text-primary);

}


.account-confirm-dialog__description {

    margin:
        var(--space-sm)
        0
        var(--space-lg);

    line-height:
        1.6;

    color:
        var(--text-secondary);

}


.account-confirm-dialog__actions {

    display:
        flex;

    justify-content:
        flex-end;

    gap:
        var(--space-sm);

}


.account-confirm-dialog__confirm {

    color:
        #ffffff;

    background-color:
        #b33a3a;

    border-color:
        #b33a3a;

}


.account-confirm-dialog__confirm:hover {

    background-color:
        #8f2929;

    border-color:
        #8f2929;

}

@media (max-width: 30rem) {

    .account-confirm-dialog__actions {

        flex-direction:
            column-reverse;

    }


    .account-confirm-dialog__actions .btn {

        width:
            100%;

    }


    .account-statistics-navigation__links {

        flex-direction:
            column;

    }


    .account-statistics-navigation__link {

        width:
            100%;

        flex:
            0 0 auto;

    }

}

@media (min-width: 48rem) {

    .account-tracked-statistics__item {

        flex-direction:
            row;

        align-items:
            center;

        justify-content:
            space-between;

        gap:
            var(--space-lg);

    }


    .account-tracked-statistics__item-main {

        flex:
            1 1 auto;

    }


    .account-tracked-statistics__item-actions {

        flex:
            0 0 auto;

        flex-wrap:
            nowrap;

    }


    .account-tracked-statistics__status {

        flex:
            0 0 auto;

        align-self:
            auto;

    }

}

@media (max-width: 47.9375rem) {

    .account-statistics-navigation__links {

        width:
            100%;

    }


    .account-statistics-navigation__link {

        flex:
            1 1 0;

        min-width:
            8rem;

    }

    .account-page__grid {

        grid-template-columns:
            1fr;

    }


    .account-page__grid > .card:last-child {

        grid-column:
            auto;

    }


    .account-summary__row {

        flex-direction:
            column;

        gap:
            0.25rem;

    }


    .account-summary__value {

        text-align:
            left;

    }


    .account-section__actions {

        justify-content:
            stretch;

    }


    .account-section__actions .btn {

        width:
            100%;

    }

}

/* ==========================================================
   AUTH PAGE
   ========================================================== */

.auth-layout {

    --page-max-width:
        40rem;

}

.auth-card {

    width:
        100%;

    margin:
        var(--space-lg)
        auto
        0;

}

.auth-form {

    width:
        100%;

    max-width:
        28rem;

    margin:
        0
        auto;

}

/* ==========================================================
   Campi autenticazione
   ========================================================== */

.auth-form .form-group {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        stretch;

    gap:
        var(--space-xs);

    margin-bottom:
        var(--space-md);

    text-align:
        left;

}

.auth-form .form-group label {

    font-weight:
        600;

    color:
        var(--text-primary);

}

.auth-form .form-group input {

    width:
        100%;

    min-height:
        3rem;

    padding:
        0
        var(--space-sm);

    border:
        1px solid
        var(--border-color);

    border-radius:
        var(--radius-md);

    color:
        var(--text-primary);

    background-color:
        var(--surface-color);

}

.auth-form .form-group input:focus {

    outline:
        none;

    border-color:
        var(--primary-color);

    box-shadow:
        0 0 0 .2rem
        rgba(247, 147, 26, .15);

}

.auth-form .form-help {

    margin:
        0
        0
        var(--space-md);

    font-size:
        0.875rem;

    line-height:
        1.5;

    color:
        var(--text-secondary);

}

/* ==========================================================
   Messaggi autenticazione
   ========================================================== */

.auth-form [role="status"] {

    margin:
        0
        0
        var(--space-md);

    padding:
        var(--space-sm)
        var(--space-md);

    font-size:
        0.875rem;

    line-height:
        1.5;

    text-align:
        center;

    color:
        var(--text-secondary);

    background-color:
        var(--background-color);

    border:
        1px solid
        var(--border-color);

    border-radius:
        var(--radius-md);

}

.auth-form [role="status"][data-state="info"] {

    color:
        var(--text-secondary);

    background-color:
        var(--background-color);

    border-color:
        var(--border-color);

}

.auth-form [role="status"][data-state="error"] {

    color:
        #8a2d0b;

    background-color:
        #fff4ed;

    border-color:
        rgba(247, 147, 26, 0.45);

}

/* ==========================================================
   Azioni autenticazione
   ========================================================== */

.auth-form > .btn--primary {

    width:
        100%;

    margin-top:
        var(--space-xs);

}

.auth-form__secondary {

    display:
        flex;

    gap:
        var(--space-sm);

    margin-top:
        var(--space-md);

}

.auth-form__secondary .btn {

    flex:
        1 1 0;

    min-width:
        0;

}

.auth-form__home {

    margin-top:
        var(--space-sm);

    text-align:
        center;

}

.auth-home-link {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        var(--space-xs);

    padding:
        var(--space-xs)
        var(--space-sm);

    font-weight:
        600;

    text-decoration:
        none;

    color:
        var(--text-secondary);

    border-radius:
        var(--radius-md);

    transition:
        color 0.2s ease,
        background-color 0.2s ease;

}


.auth-home-link:hover {

    color:
        var(--primary-dark);

    background-color:
        var(--primary-light);

}


.auth-home-link:focus-visible {

    outline:
        none;

    box-shadow:
        0 0 0 0.2rem
        rgba(247, 147, 26, 0.2);

}

/* ==========================================================
   PAGINA INFORMAZIONI
   ========================================================== */

.information-page {

    width:
        100%;

    max-width:
        var(--page-max-width);

    margin:
        0
        auto;

}


/* ==========================================================
   Intestazione
   ========================================================== */

.information-page__header {

    text-align:
        center;

}


.information-page__header .app-logo {

    width:
        min(22rem, 85%);

}


.information-page__header h1 {

    margin:
        var(--space-md)
        0
        0;

    font-size:
        clamp(1.75rem, 4vw, 2.25rem);

    color:
        var(--text-primary);

}


.information-page__header p {

    max-width:
        44rem;

    margin:
        var(--space-sm)
        auto
        0;

    line-height:
        1.6;

    color:
        var(--text-secondary);

}


/* ==========================================================
   Navigazione
   ========================================================== */

.information-page__navigation {

    display:
        flex;

    justify-content:
        flex-start;

    margin-top:
        var(--space-lg);

}


/* ==========================================================
   Contenuto
   ========================================================== */

.information-page__content {

    margin-top:
        var(--space-md);

    text-align:
        left;

}


.information-page__content .card__body {

    padding:
        var(--space-xl);

}

/* ==========================================================
   Sezioni informative
   ========================================================== */

.information-section {

    padding:
        0
        0
        var(--space-xl);

    margin:
        0
        0
        var(--space-xl);

    border-bottom:
        1px solid
        var(--border-color);

    scroll-margin-top:
        var(--space-lg);

}

.information-section:last-child {

    padding-bottom:
        0;

    margin-bottom:
        0;

    border-bottom:
        0;

}

.information-section h2 {

    margin:
        0
        0
        var(--space-sm);

    font-size:
        1.25rem;

    color:
        var(--text-primary);

}

.information-section p {

    width:
        100%;

    margin:
        0;

    line-height:
        1.7;

    text-align:
        left;

    color:
        var(--text-secondary);

}

.information-section p + p {

    margin-top:
        var(--space-md);

}

.information-subtitle {

    margin:
        var(--space-lg)
        0
        var(--space-sm);

    font-weight:
        700;

    color:
        var(--text-primary);

}

.information-archive-list {

    margin:
        var(--space-sm)
        0
        var(--space-md);

    padding-left:
        1.5rem;

    color:
        var(--text-secondary);

}

.information-archive-list li {

    line-height:
        1.7;

}

.information-archive-list strong {

    color:
        var(--text-primary);

}

.information-source-link {

    font-weight:
        600;

    color:
        var(--primary-color);

    text-decoration:
        underline;

    text-underline-offset:
        0.15rem;

}

.information-source-link:hover {

    color:
        var(--primary-dark);

}

.information-source-link:focus-visible {

    outline:
        none;

    border-radius:
        0.2rem;

    box-shadow:
        0 0 0 0.2rem
        rgba(247, 147, 26, 0.2);

}

/* ==========================================================
   Responsive
   ========================================================== */

@media (max-width: 47.9375rem) {

    .information-page__navigation .btn {

        width:
            100%;

    }

    .information-page__content .card__body {

        padding:
            var(--space-lg);

    }

}

/* ==========================================================
   Giochi disponibili
   ========================================================== */

.home-games {

    margin-top: var(--space-xl);

}

.home-games__header {

    text-align: center;

}

.home-games__title {

    margin: 0;

}

.home-games__description {

    margin-top: var(--space-sm);

    color: var(--text-secondary);

}

.home-games__list {

    display: grid;

    grid-template-columns: 1fr;

    gap: var(--space-lg);

    justify-items: center;

}

.home-games__loading {

    margin: 0;

    text-align: center;

    color: var(--text-secondary);

}

/* ==========================================================
   Card gioco
   ========================================================== */

.game-card {

    display: flex;

    flex-direction: column;

    gap: var(--space-sm);

    width: 100%;

    max-width: 30rem;

    margin: 0 auto;

    padding: var(--space-lg);

    background: var(--surface-color);

    border: 1px solid var(--border-color);

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-soft);

}

.game-card__header {

    display: flex;
    align-items: center;
    justify-content: center;

    gap: var(--space-sm);

}

.game-card__icon {

    display: block;

    width: 2rem;
    height: 2rem;
    flex: 0 0 2rem;

    object-fit: contain;

}

.game-card__title {

    margin: 0;

    font-size: 1.25rem;

    color: var(--text-primary);

}

.game-card__body {

    flex: 1;

}

.game-card__description {

    margin: 0;

    line-height: 1.6;

    text-align: center;

    color: var(--text-secondary);

}

.game-card__footer {

    display: flex;

    gap: var(--space-sm);

    width: 100%;

}


.game-card__footer .btn {

    flex: 1 1 0;

    min-width: 0;

}


.game-card button {

    width: 100%;

}

/* ==========================================================
   Strumenti Pitagorix
   ========================================================== */

.home-tools {

    margin-top:
        var(--space-lg);

}


.home-tools__header {

    text-align: center;

}


.home-tools__title {

    margin: 0;

}


.home-tools__description {

    margin-top:
        var(--space-sm);

    color:
        var(--text-secondary);

}

/* ==========================================================
   Singolo strumento
   ========================================================== */

.home-tool {

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap:
        var(--space-xl);

    width: 100%;

    padding:
        var(--space-lg);

    border:
        1px solid
        var(--border-color);

    border-radius:
        var(--radius-lg);

    background:
        var(--surface-color);

}

.home-tool__content {

    flex: 1;

    min-width: 0;

    text-align: left;

}

.home-tool__title {

    margin: 0;

    font-size:
        1.25rem;

    color:
        var(--text-primary);

}

.home-tool__description {

    margin:
        var(--space-xs)
        0
        0;

    line-height:
        1.6;

    color:
        var(--text-secondary);

}

.home-tool__actions {

    flex:
        0 0 auto;

}

.home-tool__actions .btn {

    min-width:
        12rem;

}

/* ==========================================================
   Responsive
   ========================================================== */

@media (max-width: 47.9375rem) {

    body {
        padding: 1rem;
    }

    .home-tool {

        flex-direction:
            column;

        align-items:
            stretch;

        gap:
            var(--space-md);

    }

    .home-tool__content {

        text-align:
            center;

    }

    .home-tool__actions {

        width:
            100%;

    }

    .home-tool__actions .btn {

        width:
            100%;

        min-width:
            0;

    }
	
	.account-panel__content .btn {

        flex:
            1 1 0;

        min-width:
            0;

    }
	
	.account-panel__status {

        flex:
            1 0 100%;

    }
	
	    .account-panel__identity-desktop {

        display:
            none;

    }

    .account-panel__identity-mobile {

        display:
            inline;

    }

    .account-panel__email {

        display:
            block;

        flex:
            1 0 100%;

        margin:
            0;

        color:
            var(--text-secondary);

        overflow-wrap:
            anywhere;

    }

}

@media (max-width: 22rem) {

    body {
        padding-inline: 0.75rem;
    }

    .game-card__footer {

        flex-direction: column;

    }

}

@media (min-width: 48rem) {

    .home-games__list {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

    }

}

@media (min-width: 62rem) {

    .home-games__list {

        grid-template-columns:
            repeat(3, minmax(0, 1fr));

    }

}