.powermail_imagetiles_grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 1rem;
  justify-content: center;
}

.powermail_imagetile {
    cursor: pointer;
}

.powermail_image_checkbox_label {
    font-size: 32px;
    line-height: 1.2;
    margin-bottom: 48px;
}

.powermail_imagetile_image {
    position: relative;

   &:before {
        background-color: #000;
        content: "";
        inset: 0;
        opacity: 0;
        pointer-events: none;
        position: absolute;
        transition: opacity .5s ease-in;
   }

    &:after {
        content: "";
        left: 50%;
        opacity: 0;
        pointer-events: none;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        transition: opacity .5s ease-in;
    }
}

.powermail_imagetile_input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.powermail_imagetile_image img {
  display: block;
  width: 100%;
  height: 283px;
}

.powermail_imagetile_label {
  padding: 16px 0 0;
  font-size: 20px;
  font-weight: 700;
}

.powermail_imagetile--selected {
    .powermail_imagetile_image {
        &:before {
          opacity: .5;
        }

        &:after {
          content: url('data:image/svg+xml,<svg width="91" height="83" viewBox="0 0 91 83" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.00003 49.7869L37.8439 81.0002C54.8945 54.6669 71.9494 28.3336 89 2.00024" stroke="white" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>');
          opacity: 1;
        }
    }
}

@media (max-width: 992px) {
  .powermail_imagetiles_grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}

@media (max-width: 650px) {
  .powermail_imagetiles_grid {
    grid-template-columns: 1fr
  }
}