/* ==================================================
   THEMES PAGE
================================================== */

.themes-page{

    padding:140px 0;
}


/* ==================================================
   LISTA
================================================== */

.themes-list{

    margin-top:70px;
}

/* ==================================================
   ITEM
================================================== */

.theme-item{

    display:grid;

    grid-template-columns:
    120px
    1fr
    120px;

    gap:40px;

    align-items:center;

    padding:45px 0;

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

    transition:.3s ease;
}

.theme-item:last-child{

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

.theme-item:hover{

    padding-left:20px;
}

/* ==================================================
   CONTADOR
================================================== */

.theme-count{

    color:rgba(196,90,0,.18);

    font-size:4rem;

    font-weight:800;

    line-height:1;
}

/* ==================================================
   CONTEÚDO
================================================== */

.theme-content h2{

    margin-bottom:12px;
}

.theme-content h2 a{

    color:var(--brown);

    text-decoration:none;

    font-size:2rem;

    font-weight:800;

    transition:.3s;
}

.theme-content h2 a:hover{

    color:var(--primary);
}

.theme-content p{

    max-width:750px;

    color:var(--muted);

    line-height:1.9;
}

/* ==================================================
   ACÇÃO
================================================== */

.theme-action{

    text-align:right;
}

.theme-action a{

    color:var(--primary);

    font-weight:700;

    text-decoration:none;

    transition:.3s;
}

.theme-action a:hover{

    transform:translateX(5px);
}

/* ==================================================
   RESPONSIVO
================================================== */

@media(max-width:992px){

    .theme-item{

        grid-template-columns:1fr;

        gap:20px;
    }

    .theme-action{

        text-align:left;
    }

    .theme-count{

        font-size:3rem;
    }

    .theme-content h2 a{

        font-size:1.6rem;
    }
}