* {
  box-sizing: border-box; }

img {
  max-width: 100%;
  vertical-align: top; }

.gallery {
  display: flex;
  float: left;
  margin-left: 1%;
  margin-right: auto;
  margin-top: 2%;
  width: 100%;
  position: relative;
  padding-top: 66.66667%;
  }
  .gallery-main-img{
    display: flex;
    align-items: center;
    justify-content: center;
    /* float: left; */
    width: 100%;
    border-style: solid;
    border-width: 1px;
    height: auto;
    padding: 2%;
    border-radius: 2em;
    border-color: gray;
    border-style: dashed;
  }
    @media screen and (min-width: 600px) {
    .gallery {
      padding-top: 400px; } }

  .gallery__img     {

    width: auto;
    /* position: absolute;
    top: 0;
    left: 0; */
    max-height: 500px;
    opacity: 1;
    /* width: auto; */
    padding: 8%;
    padding-bottom: 0;
    padding-top: 0;
    transition: opacity 0.3s ease-in-out;}
.gallery__item{
  /* float: left; */
width: 20%;
display: inline-block;
}
  .gallery__thumb {
    padding-top: 6px;
    margin: 6px;
    width:100px;
    display: block; }
  .gallery__selector {
    position: absolute;
    opacity: 0;
    visibility: hidden; }
    .gallery__selector:checked + .gallery__img {
      opacity: 1; }
    .gallery__selector:checked ~ .gallery__thumb > img {
      box-shadow: 0 0 0 3px #0be2f6; }