Collections privées

@import url(https://fonts.googleapis.com/css2?family=Arizonia&display=swap); main { display: grid; grid-template-columns: 1fr repeat(12, minmax(auto, 60px)) 1fr; grid-gap: 40px; padding: 60px 0; } .btn_home{ background: #e1e1d9; /* border: 2px solid black; */ font-family: 'Arizonia', cursive; line-height: 1; margin: 0.5em; padding: 0.5em 0.5em; color: black; font-size: 28px; } .btn_home:hover { background-color: #d0d0cc; font-size: 29px !important; } .text--medium { font: "inherit; font-size: 16px; line-height: 20px; font-weight: 400; color: black; } .cards { grid-column: 2 / span 12; display: grid; grid-template-columns: repeat(12, minmax(auto, 60px)); grid-gap: 40px; } .card { grid-column-end: span 4; display: flex; flex-direction: column; background-color: white; ; transition: all 0.3s ease 0s; box-shadow: 0 20px 40px -14px rgba(0,0,0,0.25); } .card:hover { transform: translateY(-7px); } .card__image-container { width: 100%; padding-top: 56.25%; overflow: hidden; position: relative; } .card__image-container img { width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .card__content { padding: 20px; } .card__desc { margin-bottom: 20px; font-size: 15px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .card__info { display: flex; align-self: end; align-items: center; } .card__price { color: black !important; margin-left: auto; padding: 5px 20px; background-color: #e1e1d9; border-radius: 0px; text-decoration: none; font-size: 12px !important; } .card__price:hover { margin-left: auto; color:white; padding: 5px 20px; background-color: #d0d0cc; border-radius: 0px; font-size: 13px !important; } .card__title { margin-bottom: 10px; font-size:1em; } .collection_title{ font-size: 46px; text-align: center; margin-bottom: -30px; margin-top: 30px; color: #dddad1; } @media only screen and (max-width: 1000px) { .card { grid-column-end: span 6; } } @media only screen and (max-width: 700px) { main { grid-gap: 20px; } .card { grid-column-end: span 12; } } @media only screen and (max-width: 500px) { main { grid-template-columns: 10px repeat(6, 1fr) 10px; grid-gap: 10px; } .cards { grid-column: 2 / span 6; grid-template-columns: repeat(6, 1fr); grid-gap: 20px; } .card { grid-column-end: span 6; } .collection_title{ font-size: 45px; } }