ul.product-block--frame-thumbnail-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 0;
  
  & li.product-block--frame-button {
    width: 40px;
    height: 40px;
    border-radius: 40px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid transparent;
    cursor: pointer;
    
    &:hover {
      border-color: rgba(0, 0, 0, .25)
    }

    &.selected-addon {
      border-color: rgba(0, 0, 0, .75)
    }

    &.hidden {
      display: none;
    }
    
    & img {
      max-width: 100%;
      height: auto;
    }
    
    & svg.placeholder-icon {
      width: 30px;
      height: 30px;
      opacity: .5;
    }
  }
}
.media-with-frame {
  border-width: 10px;
  border-style: solid;
  border-image-outset: 0;
  border-image-repeat: round;
  border-image-slice: 18;
  border-image-width: 12px;
}

@media only screen and (max-width: 749px) {
  .media {
    max-width: 65%;
    margin: 1rem auto;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
    display: block;
    box-sizing: border-box;
  }

  .media img {
    display: block;
    width: 100%;
    height: auto;
    box-shadow: none;
    box-sizing: border-box;
  }

  .media-with-frame {
    border-width: 8px;
    border-style: solid;
    border-image-outset: 0;
    border-image-repeat: round;
    border-image-slice: 18;
    border-image-width: 12px;
    box-sizing: border-box;
    background-color: #f7f7e8; /* optional */
  }

}

.product-block--service-wrapper.hidden,
.product-block--service.hidden {
  display: none;
}