rocketstar-3461967: Read more and Title needs space from bottom and top.

Read more and Title needs space from bottom and top.

assets/css/style.css

@@ -1247,7 +1247,8 @@ div#sliding-popup .eu-cookie-withdraw-banner,
 .user-login-form .form-actions {
   margin: 0;
 }
-======= .search-form .search-advanced {
+
+.search-form .search-advanced {
   margin-top: 20px;
 }
 
@@ -1305,3 +1306,221 @@ div#sliding-popup .eu-cookie-withdraw-banner,
 .search-form .search-advanced #edit-lang-fieldset #edit-language--wrapper {
   padding-top: 10px;
 }
+
+@media (max-width: 768px) {
+  .col-20 {
+    flex: 0 0 33%;
+    max-width: 33%;
+  }
+
+  .menu-primario-ativo .menu-list,
+  .menu-primario-ativo .menu-list li:hover > ul {
+    width: 100%;
+  }
+
+  .menu-primario-ativo .menu-list li ul {
+    position: relative;
+    transform: translateX(0);
+    left: 0;
+    height: auto;
+  }
+
+  .barra-menus .container > div {
+    display: block;
+  }
+
+  .barra-menus .container div nav {
+    margin-right: 0;
+  }
+
+  .logo img {
+    max-width: 50px;
+  }
+
+  h1 {
+    font-size: 1.2rem;
+  }
+
+  header .top {
+    height: 60px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 6px 0;
+    min-width: 100% !important;
+  }
+
+  .header-mobile .mapa a {
+    color: var(--cor-segunda);
+    padding: 0 13px;
+    border-right: 1px solid var(--cor-quarta);
+  }
+
+  .search form {
+    transition: width 0.3s ease;
+    right: 0;
+    position: absolute;
+    top: -63px;
+    width: 0;
+    z-index: 0;
+    overflow: hidden;
+  }
+
+  .search.active form {
+    width: 95%;
+    right: 50%;
+    transform: translateX(50%);
+  }
+
+  .searchMobileIco {
+    display: block;
+  }
+
+  .search button[type="submit"] {
+    right: 6px;
+    padding: 6px;
+    border-radius: 50px;
+    width: 40px;
+  }
+
+  .search,
+  .search input[type="search"] {
+    width: 100%;
+  }
+
+  .search input[type="search"] {
+    padding: 10px 20px;
+    font-size: 15px;
+    border-radius: 5px;
+  }
+
+  .searckMobile,
+  .search form {
+    top: -45px;
+  }
+
+  .searckMobile {
+    position: absolute;
+    right: 10px;
+    background: var(--cor-quarta);
+    width: 40px;
+    height: 40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50px;
+    border: 1px solid var(--cor-quinta-hover);
+  }
+
+  .searckMobile i,
+  .searckMobile svg {
+    color: var(--cor-sexta);
+  }
+}
+
+@media (max-width: 550px) {
+  #block-govbr-breadcrumbs {
+    margin-bottom: 20px;
+    padding-bottom: 13px;
+    border-bottom: 1px solid var(--cor-quarta);
+  }
+
+  .col-20 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+
+  .oculto-no-desktop {
+    display: block;
+  }
+
+  .oculto-no-mobile {
+    display: none;
+  }
+
+  .menu-top svg,
+  .menu-top i {
+    z-index: 2;
+    position: sticky;
+    font-size: 13px;
+    color: var(--cor-sexta);
+  }
+
+  .menu-top {
+    display: flex;
+    width: 25px;
+    height: 25px;
+    background: var(--cor-primeira);
+  }
+
+  .header-mobile-menu {
+    position: relative;
+  }
+
+  #menu-top-container {
+    display: none;
+  }
+
+  #menu-top-container,
+  #menu-mobile-acessibilidade {
+    right: 15px;
+  }
+
+  #menu-mobile-esquerda,
+  #menu-mobile-acessibilidade {
+    top: 84px !important;
+  }
+
+  #menu-mobile-esquerda {
+    left: 15px;
+  }
+
+  #menu-top-container,
+  #menu-mobile-esquerda,
+  #menu-mobile-acessibilidade {
+    position: absolute;
+    background: var(--cor-primeira);
+    top: 30px;
+    z-index: 9;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    border: 1px solid var(--cor-quarta);
+    border-radius: 4px;
+  }
+
+  #menu-top-container .menu-list,
+  #menu-mobile-esquerda .menu-list,
+  #menu-mobile-acessibilidade .menu-list {
+    display: block;
+    z-index: 999999999999999999999999999;
+  }
+
+  #menu-top-container .menu-list li,
+  #menu-mobile-esquerda .menu-list li,
+  #menu-mobile-acessibilidade .menu-list li {
+    border-left: 0;
+  }
+
+  #menu-top-container .menu-list li a,
+  #menu-mobile-esquerda .menu-list li a,
+  #menu-mobile-acessibilidade .menu-list a {
+    color: var(--cor-terceira);
+    padding: 10px 8px;
+  }
+
+  #menu-top-container .menu-list li:first-child a {
+    color: red;
+  }
+
+  #menu-top-container .menu-list li:first-child,
+  #menu-mobile-esquerda .menu-list li:first-child,
+  #menu-mobile-acessibilidade .menu-list li:first-child {
+    padding-left: 5px;
+  }
+}
+article {
+  margin-bottom: 50px;
+}
+
+article ul.links.inline {
+  margin-top: 15px;
+}