.row-container { /* display: flex; flex-flow: row wrap; */ grid-template-columns: 1fr 1fr 1fr 1fr; } /* Au dessus de 430px de large, on place deux cards par ligne */ .band { width: 90%; margin: 10px auto; display: grid; grid-template-columns: 1fr; grid-template-rows: auto; grid-gap: 20px; justify-content: center; } @media only screen and (min-width: 430px) { .band { grid-template-columns: 1fr 1fr; } } @media only screen and (min-width: 700px) { .band { grid-template-columns: 1fr 1fr 1fr; } } @media only screen and (min-width: 950px) { .band { grid-template-columns: 1fr 1fr 1fr 1fr; } } .drink-card { min-height: 100%; max-width: 200px; background: white; padding: 10px; box-shadow: 0 2px 2px rgba(0,0,0,0.1); border-radius: 4px; display: flex; flex-flow: column nowrap; color: #222222; top: 0; position: relative; transition: all .1s ease-in; } article .xp-number { color: #EAE000; font-size: 1.8em; font-weight: bolder; } article .xp { font-size: 1.3em; font-weight: bolder; text-transform: uppercase; color: #000000; } .drink-card:hover { top: -2px; box-shadow: 0 4px 5px rgba(0,0,0,0.2); } .title { color: #6E2424; font-size: 1.1em; font-weight: bold; } .thumb { padding: 5% 5% 60% 5%; background-size: cover; background-position: center center; } .drink-card > hr { margin-top: 0; margin-bottom: 3px; } .description { font-size: 0.7em; color: #95A5A6; } .drink-card button { align-self: flex-end; margin: 0 auto } /*a moi*/ .card-header { background-color: transparent; align-self: flex-start; } .card-content { align-self: center; } .card-action { align-self: flex-end; } .card-header > img { height: 130px; width: 130px; } .card-header > p { color: #6E2424; font-size: 1.1em; font-weight: bold; } .card-header > p, .card-header > img { margin: 5px auto; } .column-container { display: flex; flex-flow: column nowrap; } .h-center { text-align: center; } .v-center { text-align: center; }