| div.gallery { | |
| border: 1px solid #ccc; | |
| } | |
| div.gallery:hover { | |
| border: 1px solid #777; | |
| } | |
| div.gallery img { | |
| width: 100%; | |
| height: auto; | |
| } | |
| div.desc { | |
| padding: 15px; | |
| text-align: center; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| } | |
| .responsive { | |
| padding: 0 6px; | |
| float: left; | |
| width: 24.99999%; | |
| } | |
| @media only screen and (max-width: 700px) { | |
| .responsive { | |
| width: 49.99999%; | |
| margin: 6px 0; | |
| } | |
| } | |
| @media only screen and (max-width: 500px) { | |
| .responsive { | |
| width: 100%; | |
| } | |
| } | |
| form { | |
| background-color: #4654e1; | |
| width: 300px; | |
| height: 44px; | |
| border-radius: 5px; | |
| display: flex; | |
| flex-direction: row; | |
| align-items: center; | |
| } | |
| input { | |
| all: unset; | |
| font: 16px system-ui; | |
| color: #fff; | |
| height: 100%; | |
| width: 100%; | |
| padding: 6px 10px; | |
| } | |
| ::placeholder { | |
| color: #fff; | |
| opacity: 0.7; | |
| } | |