:root {
    --light: white;
    --medium: #D3D3D3;
    --darker: #a5a5a5;
    --border: #c9c9c9;
    --bgcol: #e5c8cd;
        --newcol: #8cccd1;
        --newcolo: #f7afa6;
}

.flip-card {
    background-color: transparent;
    width: 100%;
    height: 250px;
}
.zajeciaCeny{
    display: grid;
    justify-content: center;
    margin: 1rem auto 2rem;
}
.zajeciaCeny span:first-child {
    margin-bottom:1rem;
}
.zajeciaCeny span{
    display: grid;
    justify-content: center;
    text-align: center;
}

/* This container is needed to position the front and back side */
.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.5s;
    transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    /* Safari */
    backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
    background-color: var(--bgcol);
    border:solid 1px var(--nbgcol);
    border-radius: 25px 25px 0px 0px;
    display: grid;
    grid-template-rows: 2fr 1fr;
    align-items: center;
}
.flip-card-front p {
    margin-bottom: 2rem;
}
/* Style the back side */
.flip-card-back {
    background-color: var(--bgcol);
    border: solid 1px var(--bgcol);
    color: black;
    transform: rotateY(180deg);
    border-radius: 25px 25px 0px 0px;
    display: grid;
}
.flip-card-back > p {
    font-size: 20px;
    display: grid;
    justify-self: center;
    align-self: center;
}
.cardButton{
    text-align: center;
    padding: 0.5rem;
    margin-top: -1px;
    border: solid 1px var(--bgcol);
    border-radius: 0px 0px 25px 25px;
}
.cardButton:hover {
    background-color: rgba(206, 206, 206, 0.2);
}
.singleCard{
    display: grid;
    margin: auto;
    width: 300px;
    margin-bottom: 2rem;
}
.cardContainer{
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem 1rem;
}


.flip-card-front > p {
    font-size: 1.1rem;
}



@media screen and (min-width: 685px) {
    .cardContainer {
            display: grid;
            grid-template-columns: 1fr 1fr;
            margin: auto;
        }
}
@media screen and (min-width: 1000px) {
    .cardContainer {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        margin: auto;
        max-width: 1100px;
    }
}