/* TIMELINE
/////////////////////////////////////////////////////// */

.timeline { 
	width: 100%;
	height: auto;
    padding: 0 3vw;
    grid-template-columns: repeat(4, 1fr); 
	display: grid;
	gap: var(--gap);
    position: relative; }
	
.timeline__card { 
	width: 100%;
	height: 45vh;
    transform-style: preserve-3d;
    transform-origin: center right; 
    position: relative;
    -webkit-transition: all 0.75s;
            transition: all 0.75s; 
    cursor: pointer; }

.card__face {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius); 
    background: var(--orange);
    position: absolute;
    -webkit-backface-visibility: hidden;
       -moz-backface-visibility: hidden;
            backface-visibility: hidden;
    -webkit-transition: all 0.35s;
            transition: all 0.35s; }

.card__face--front {
    overflow: hidden; }

.card__face--front:hover {
    transform: rotate(180deg); }

.card__face--front:hover p {
    transform: rotate(-190deg); }

.card__face--back {
    cursor: default; }

.card__face--back p {
    transform: rotate(0);  }

.timeline__card.flipping {
    -webkit-transform: translateX(-100%) rotateY(-180deg);
            transform: translateX(-100%) rotateY(-180deg); }

.card__face--back {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg); }

.card__face--front {
    color: var(--white); }

.card__face--back {
    background: var(--green);}

.card__face--back.finish__game {
    background: var(--orange); } 

/* TIMELINE
/////////////////////////////////////////////////////// */

.card__face p {
    font-family: "Oleo Script", system-ui;
    font-weight: 400;
    font-size: 2.625vw;   
    line-height: 0.9em; 
    letter-spacing: 0;
    text-align: center; }

.card__face span {
    font-family: "Barlow Semi Condensed", sans-serif;
    font-weight: 900;
    font-size: 2.625vw;
    margin-bottom: 0.313em;
    letter-spacing: -0.025em;
	display: block;  }

/* STYLE
/////////////////////////////////////////////////////// */