body { padding: 0; margin: 0; font-family: Arial, sans-serif; background-color: white; color: #333; } .container-title { height: 100vh; width: 100vw; display: flex; align-items: center; justify-content: center; background-color: white; overflow: hidden; } .grid-title { width: 1200px; height: 800px; min-width: 1200px; min-height: 800px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; margin-top: 3rem; position: relative; } .centered-text-title { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-weight: bold; font-size: 3.75rem; text-align: center; width: 300px; } .bloc-up-title { max-height: 700px; } .bloc-down-title { max-height: 700px; margin-top: 80px; } .container-text { display: flex; justify-content: center; align-items: center; width: 100vw; background-color: #ABB194 } .p-text { width: 700px; margin: 4rem; font-weight: 600; } .h1-card { text-align: center; font-weight: bold; background-color: white; color: black; font-size: 3rem; margin-top: 1.25rem; display: flex; align-items: center; justify-content: center; height: 100px; margin-bottom: 30px; } .container-card { width: 100vw; height: 120vh; background-color: white; display: flex; align-items: center; justify-content: center; margin-bottom: 90px; } .print-flex-card { display: flex; flex-direction: column; width: 90%; height: 70%; gap: 1.25rem; justify-content: center; } .card-card { background-color: #ABB194; min-width: 304px; min-height: 210px; border-radius: 20px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4); } .container-part-top-card { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; height: 25%; width: 100%; } .weui--time-outlined { display: inline-block; width: 48px; height: 48px; background-repeat: no-repeat; background-size: 100% 100%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='m12.6 11.503l3.891 3.891l-.848.849L11.4 12V6h1.2zM12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10s-4.477 10-10 10m0-1.2a8.8 8.8 0 1 0 0-17.6a8.8 8.8 0 0 0 0 17.6'/%3E%3C/svg%3E"); } .container-picture-card { align-self: flex-start; justify-self: start; margin-left: 1rem; margin-top: 1rem; border-radius: 9999px; width: 3rem; height: 3rem; } .container-part-bottom-card { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; height: 75%; width: 100%; font-size: 20px; } .content-part1-bottom-card { color: white; text-align: center; font-weight: bold; margin-bottom: 8px; margin-left: 10px; margin-top: 10px; } .content-part2-bottom-card { color: white; font-weight: 300; font-size: 15px; margin-left: 1rem; line-height: 10px; } .game-icons--open-gate { display: inline-block; width: 48px; height: 48px; background-repeat: no-repeat; background-size: 100% 100%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23fff' d='M192 64c-15.4 3.77-35.7 16.04-53 33.17c-19.2 19.13-34.9 43.63-39.58 64.63l-.58 135.3l.37 157.4l93.99-40.3zm128 0l-1.2 350.2l94 40.3l.4-156.8l-.6-135.9c-4.7-21-20.3-45.5-39.6-64.63c-17.3-17.13-37.6-29.4-53-33.17M57.24 94.67c-8.39 0-15 6.63-15 15.03s6.61 15 15 15s15-6.6 15-15s-6.61-15.03-15-15.03m397.56 0c-8.4 0-15 6.63-15 15.03s6.6 15 15 15s15-6.6 15-15s-6.6-15.03-15-15.03M35.5 142.7l-1.42 334h46l1.42-334zm395 0l1.5 334h46l-1.5-334zM159.2 231h18v48h-18zm175.6 0h18v48h-18z' stroke-width='13' stroke='%23fff'/%3E%3C/svg%3E"); } @media (min-width: 640px) { } @media (min-width: 768px) { } @media (min-width: 1024px) { .centered-text-title { font-size: 6rem; } .container-card { height: 80vh; } .print-flex-card { flex-direction: row; flex-wrap: wrap; } .card-card { max-height: 300px; } } @media (min-width: 1280px) { .card-card { max-height: 300px; } } @media (min-width: 1536px) { }