.navbar { width: 100%; height: 50px; display: flex; align-items: center; justify-content: space-between; border-bottom: #000000 2px solid; } .navbar__title { font-size: 1.5em; margin: 0 15px; } .navbar__links { display: flex; } .button-link { background-color: #999; height: 2rem; line-height: 2rem; display: flex; padding: 0 0.75rem; text-decoration: none; color: white; border: none; cursor: pointer; margin: 0 15px; } .button:hover { filter: brightness(1.1); } .container { width: 100%; height: 100vh; display: flex; } .button { border: rgba(0, 0, 0, 0.116) 1px solid; background-color: none; margin: 15px 0; width: 150px; height: 50px; } .container__section { flex: 1; padding: 15px; display: block; } .container__section__title { margin: 15px 0; font-size: 1.5em; } .container__section__photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); row-gap: 35px; column-gap: 15px; justify-items: stretch; } .section__photos__item { width: 150px; height: 150px; } .section__photos__item--active { width: 150px; height: 150px; } .container__section__map { cursor: default; height: 600px; width: 100%; } .container__section__form { width: 100%; height: 600px; } .input { width: 100%; height: 30px; margin-bottom: 15px; margin-top: 5px; display: block; box-sizing: border-box; } .textarea { width: 100%; height: 350px; margin-bottom: 15px; margin-top: 5px; display: block; box-sizing: border-box; resize: none; font-size: 1.2em; padding: 3px 8px; } .textarea--small { height: 150px; } .label { width: 100%; } .container__section__form__offenses { margin-bottom: 15px; } //to change name .img { width: 100%; height: 100%; } .img--active { width: 100%; height: 100%; border: 3px solid seagreen; } .chceckbox { appearance: none; vertical-align: middle; font-size: inherit; cursor: pointer; width: 1.5em; height: 1.5em; background: white; border: 0.1em solid #000000; position: relative; } input[type="checkbox"]:checked { background: #000000; } /*breakpoint for mobile*/ @media (max-width: 1200px) { body { font-size: 2rem; } .container { flex-direction: column; } .container__section__title { margin: 25px 0; font-size: 1.5em; } .container__section__photos { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } .section__photos__item { width: 200px; height: 200px; } .button { width: 250px; margin: 30px 0; height: 75px; } .container__section__form { width: 100%; height: 600px; } .input { width: 90%; height: 75px; font-size: 2rem; margin-top: 10px; margin-bottom: 25px; } .input--textarea { height: 450px; width: 90%; margin-top: 10px; margin-bottom: 25px; } }