@charset "utf-8";
<style>
.colorpicker {
    list-style-type:none;
}

.colorpicker li {
    float: left;
    list-style-type:none;
    text-align: center;
}

.colorpicker li img {
    width: 100px;
    height: auto;
    cursor: pointer;
}

.gallery {
  display: grid;
  
  grid-gap: 5px;
  grid-column-start: 1;
  grid-row-start: 1;
  grid-row-end: 3;
  align-content: start;
  max-width: 900px;
  margin: 0 auto;
  transition: all 150ms linear;
}

.gallery input[type="radio"] {
  display: none;
}

.gallery label {
  position: relative;
  display: block;
  padding-bottom: 60%;
  margin: 5px;
  cursor: grab;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 10% 10%;
}

.gallery label:before {
  border: 1px solid #e3e3e3;
  content: '';
  position: absolute;
  left: -5px;
  right: -5px;
  bottom: -5px;
  top: -5px;
}

.gallery img {
  display: none;
  grid-column-start: 1;
  grid-column-end: 5;
  grid-row-start: 1;
  grid-row-end: 5;
  width: 100%;
  transition: all 150ms linear;
}

.gallery input[name="select"]:checked + label + img {
  display: block;
}

.gallery input[name="select"]:checked + label:before {
  border: 1px solid #000;
}
		
</style>