main{
    width: 80%;
    margin: 3rem auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    place-content: center;
    gap: 2rem;
}

.box{
    border: 2px solid var(--tertiary);
    border-radius: 8px;
    text-align: center;
    padding: 1rem;
}

.box:hover{
    background: var(--dark);
    color: var(--primary);
    border: none;
    /* border-style: dashed; */
}

.arabicName{
    font-size: 2.5rem;
    color: var(--logo);
}

.transliteration{
    font-size: 1rem;
    /* color: #575757; */
    margin-block: 0.5rem;
}

.meaning{
    font-size: 0.8rem;
}