diff --git a/gestaoRaul/templates/static/home/css/home.css b/gestaoRaul/templates/static/home/css/home.css index 48d860e..99447d8 100644 --- a/gestaoRaul/templates/static/home/css/home.css +++ b/gestaoRaul/templates/static/home/css/home.css @@ -1,9 +1,13 @@ + + .grid-container { display: grid; - grid-template-columns: repeat(4, 2fr); + justify-content: center; + grid-template-columns: repeat(3, 2fr); gap: 20px; - max-width: 1200px; /* Define a largura máxima do grid */ - margin: 0 auto; /* Centraliza o grid na página */ + max-width: 1200px; + margin: 0 auto; + padding: 10px; } .card { @@ -24,4 +28,30 @@ .card:hover { transform: scale(1.05); box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3); + } + + + @media screen and (max-width: 730px) { + .grid-container { + display: grid; + grid-template-columns: repeat(1, 1fr); + gap: 20px; + /* max-width: 1200px; */ + margin: 5px; + } + + .card { + width: 80%; + /* height: 80%; */ + background-color: #2b376e; + border-radius: 15px; + box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2); + text-align: center; + line-height: 30px; /* Centraliza o texto verticalmente */ + font-size: 20px; + font-weight: bold; + padding: 10px; + color: #333; + transition: transform 0.2s; + } } \ No newline at end of file