* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.special-display {
position: relative;
display: flex;
  height: 100%;
  min-height: 600px;

}

.special-display ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.special-display img {

  object-fit: cover;
  border-radius: 6px;
}

.special-display ul li{
  position: absolute;
  overflow: hidden;
  border-radius: 20px;
}
.special-display ul li img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}





/* Contents */
.special-display {
width: 576px;
height: 496px;


/* Inside auto layout */
flex: none;
order: 1;
flex-grow: 1;
}

/* Image */
.special-display ul li:nth-child(1) {
width: 160px;
height: 240px;
left: calc(50% - 160px/2 + 88px);
top: 0px;

}

/* Image */
.special-display ul li:nth-child(2) {
width: 192px;
height: 128px;
left: calc(50% - 192px/2 + 192px);
top: 256px;
}


/* Image */
.special-display ul li:nth-child(3) {
width: 192px;
height: 128px;
left: calc(50% - 192px/2 - 192px);
top: 256px;
}

/* Image */
.special-display ul li:nth-child(4) {
width: 160px;
height: 240px;
left: calc(50% - 160px/2);
top: 256px;
}


/* Image */
.special-display ul li:nth-child(5) {
width: 160px;
height: 160px;
left: calc(50% - 160px/2 - 88px);
top: 80px;
}
      

@media (max-width: 640px) {
  .special-display {
    width: 100%;
  }
/* Image */
.special-display ul li:nth-child(1) {
width: 90px;
    height: 130px;
    left: calc(50% - 150px/2 + 88px);
    top: 116px;

  
  }
  
  /* Image */
  .special-display ul li:nth-child(2) {
width: 100px;
    height: 80px;
    left: calc(50% - 100px/2 + 105px);
    top: 256px;
  }
  
  
  /* Image */
  .special-display ul li:nth-child(3) {
width: 110px;
    height: 78px;
    left: calc(50% - 110px/2 - 110px);
    top: 256px;
  }
  
  /* Image */
  .special-display ul li:nth-child(4) {
width: 90px;
    height: 120px;
    left: calc(50% - 90px/2);
    top: 256px;
  }
  
  
  /* Image */
  .special-display ul li:nth-child(5) {
width: 90px;
    height: 90px;
    left: calc(50% - 90px/2 - 40px);
    top: 157px;
  }


}