:root {
  --hz-spacing: 3%;
  --hz-spacing-2: calc(var(--hz-spacing)/2);
}

.fjm-view-impressions header {
  margin-bottom: .5em;
}

.fjm-view-impressions .form-item-name {
  margin-right: 1em;
}

.fjm-view-impressions noscript .form-actions {
  display: block;
}

.views-view-grid {
  margin-top: .5em;
}

.views-field-field-media-image-1 {
  padding: 2% var(--hz-spacing);
	
}
@media (max-width: 319px), (min-width: 481px) {

  .col-1 .views-field-field-media-image-1 {
	padding-left: 0%;
  }

  .col-2 .views-field-field-media-image-1 {
	padding-left: var(--hz-spacing-2);
	padding-right: var(--hz-spacing-2);
  }

  .col-3 .views-field-field-media-image-1{
	padding-right: 0;
  }
}

@media (min-width: 320px) and (max-width: 480px) {

  /* mobile vertical */
  .xviews-field-field-media-image-1 {
    padding: 2% 0%;
  }
}


.xcontainer {
    display: grid;
    grid-template-columns: auto auto auto; /* Adjust as needed */
    gap: 10px;
}

.fjm-view-impressions-image {
    width: 100%;
    display: inline-block;
    vertical-align: top;
    position: relative;
    overflow: hidden;
    padding-top: 65%;
    height: 0;
    border-radius: .5em;
}

.fjm-view-impressions-image img {
  vertical-align: bottom;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  object-fit: cover;
  transition: 0.4s;
}

.fjm-view-impressions-image img:hover {
    transform: scale(1.2);
}


@media (min-width: 320px) and (max-width: 480px) {
  /* mobile vertical */

  /* images must be beneath each other    */
  .fjm-view-impressions-col {
    width: 100% !important;
  }
}