.rowr::after {
  content: "";
  clear: both;
  display: block;
}

[class*="arov-"] {
  float: left;
  padding: 1px;
}

/* For desktop: */
.arov-3 {width: 70%;} 
.arov-9 {width: 30%;}


@media only screen and (max-width: 768px) {
  /* For mobile phones: */
  [class*="arov-"] {
    width: 100%;
  }
}
 
 








        .grided {
            display: grid;
            grid-template-columns: repeat(auto-fill,
              minmax(200px, 1fr));
            grid-gap: 10px
        }

        .grided > div {
            font-size: 16px; 
            color: black;
            text-align: left;
            background: white;
        }


   
.carded {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  width: 100%;
}

.carded:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.container {
  padding: 2px 5px;
  border: 2px solid #008080;
}