html {  scroll-behavior: smooth;}

.card {  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);  transition: 0.3s;  width: 100%; background-color: #fff;  border-radius: 5px; }
.card:hover {  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);}


* {  box-sizing: border-box;}

.row_grid {  display: flex;  flex-wrap: wrap;  padding: 0 4px;}

/* Create four equal columns that sits next to each other */
.column {  flex: 25%;  max-width: 25%;  padding: 0 4px;}
.column33 {  flex: 33%;  max-width: 33%;  padding: 0 4px;}
.column50 {  flex: 33%;  max-width: 50%;  padding: 0 4px;}
.column img {  margin-top: 8px;  vertical-align: middle;}


/* Responsive layout - makes a two column-layout instead of four columns */
@media (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }

  .column33 {
    flex: 100%;
    max-width: 100%;
  }

  .column50 {
    flex: 100%;
    max-width: 100%;
  }


}