.rando-grid {display: grid;grid-template-columns: repeat(5, 1fr);margin: 3rem 0;border-radius: 10px;box-shadow: rgba(0, 0, 0, 0.26) 0px 3px 8px;transition: box-shadow .3s ease;cursor: pointer;background-color: rgb(240, 240, 240)}.rando-grid:hover {box-shadow: rgba(0, 0, 0, 0.34) 0px 4px 9px}.rando-description {grid-column: 1/4}.rando-description p{margin-top: 1rem}.rando-description,.rando-stats {padding: 1rem}.rando-description .sub-title {margin-top: 0}.rando-img img {object-fit: cover;width: 100%;height: 100%;vertical-align: middle;border-radius: 5px}.rando-img-ligne-1 {grid-column: 4/6}.rando-img-ligne-2 {grid-column: 1/3}.rando-stats {grid-column: 3/6;position: relative}.rando-stats p {margin: .4rem 0}.rando-stats:after {content:'';position: absolute;top:0;left:0;height: 2px;width: 33.3%;background-color: rgba(0,0,0,0.2)}.progressbar-wrapper {background-color: #dfe6e9;color: white;border-radius: 15px;border: 1px solid rgba(0, 0, 0, 0.24);width: 60%}.progressbar {background-color: var(--dark-green);color: white;padding: 0.2rem;text-align: right;font-size: 20px;border-radius: 15px}.progressbar[title="d-sentier-roche"] {width: 90%;background-color: red}.progressbar[title="b-sentier-roche"] {width: 60%;background-color: #82c46c}.progressbar[title="d-lac-truites"] {width: 70%;background-color: rgb(184, 108, 22)}.progressbar[title="b-lac-truites"] {width: 90%;background-color: #3b911f}.progressbar[title="d-grand-ballon"] {width: 75%;background-color: rgb(175, 103, 20)}.progressbar[title="b-grand-ballon"] {width: 80%;background-color: #4aa82a}.progressbar[title="d-lac-gerardmer"] {width: 30%;background-color: #4aa82a}.progressbar[title="b-lac-gerardmer"] {width: 70%;background-color: #55c05e}@media screen and (max-width: 768px) {.rando-stats:after {display: none}.rando-grid {grid-template-columns: 1fr;grid-template-areas: "description""img-ligne-1""statistiques";}.rando-img-ligne-2 {display: none;}.rando-description {grid-area: description;}.rando-stats {grid-area: statistiques;}.rando-img-ligne-1{grid-area: img-ligne-1;}.rando-description, .rando-stats {padding: 1rem 0.5rem;}}@media screen and (max-width: 480px) {#rando .container {padding: 0 15px;}}