.custom-image-grid {
  display: flex;
  flex-direction: column;
  row-gap: 50px;

  [type=button]:focus,
  [type=submit]:focus,
  button:focus {
    background: transparent !important;
	color: black !important;
	text-decoration: uppercase !important;
  }

  [type=button]:focus-visible,
  [type=submit]:focus-visible,
  button:focus-visible {
    outline: unset !important
  }
}

.grid-wrapper {
  display: flex;
  flex-wrap: wrap;
  row-gap: 10px;
  column-gap: 10px;
}

.grid-item {
  background-size: cover;
  background-position: center;
  min-height: 488px;
}

.width-20:not(.width-20:last-child) {
  flex: 0 0 calc(25% - 10px);
}

.width-40 {
  flex: 0 0 calc(37.5% - 10px);
}

.width-60 {
  flex: 0 0 calc(50% - 10px);
}

.see-more {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  row-gap: 16px;
  font-family: "Roboto";
  border: 0;
  padding: 0;
  color: #000;
  font-weight: bold;
  text-transform: uppercase;

  span:last-child {
    transition: transform 0.3s ease
  }

  &:hover {
    background: unset !important;
    color: black !important;

    span:last-child {
/*       transform: translateY(100%) */
    }
  }
}


@media (max-width: 767px) {
  .grid-wrapper {
    flex-direction: column;
  }

  .grid-item {
    min-height: 288px;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .grid-item {
    flex: 0 0 calc(50% - 10px) !important;
    min-height: 288px !important;
  }
}