/* 

1. Add your custom Css styles below
2. Place the this code in your template: 

 <link href="css/custom.css" rel="stylesheet">

*/


.blog-grid {
  clear: both;                         /* parte sempre sotto il breadcrumb */
  display: grid;
  grid-template-columns: 1fr;          /* smartphone: 1 colonna */
  gap: 20px;
}
@media (min-width: 576px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }   /* tablet: 2 colonne */
}
@media (min-width: 992px) {
  .blog-grid { grid-template-columns: repeat(3, 1fr); }   /* desktop: 3 colonne */
}

/* annulla gli stili del masonry del template */
.blog-grid .post-item {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
  display: flex;
}

/* card tutte alte uguali, "Continua" sempre in fondo */
.blog-grid .post-item-wrap { display: flex; flex-direction: column; width: 100%; }
.blog-grid .post-image { position: relative; }
.blog-grid .post-image img { display: block; width: 100%; aspect-ratio: 13 / 8; object-fit: cover; }
.blog-grid .post-item-description { display: flex; flex-direction: column; flex: 1; }
.blog-grid .item-link { margin-top: auto; }