@import url('https://fonts.cdnfonts.com/css/morpheus');

.memoryCardsDesc {
    font-family: 'Morpheus', sans-serif;
    text-align: center;
}

.memoryCardsArea {
    display: grid;
    /*grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));*/
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    max-width: 800px;
    margin: auto;
}

.memoryCardsArea button {
    border: none;
    width: 100%;
    aspect-ratio: 1; 
    cursor: pointer;
    background-color: #f15924;
    transition-duration: 0.3s;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.blackWhite {
    /*-webkit-filter: grayscale(100%);*/
    filter: grayscale(100%);
    cursor: default !important;
}

.memoryCards img {
    width: 90%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.memoryCards img.reveal {
    opacity: 1;
}
.memoryCards img.hide {
    opacity: 0;
}