* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.

* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.

디데이를 15일부터 시작하려구 gird 구성을 4*4로 변경을 했습니다!

여기서 칸을 모두 정사각형으로 바꾸고 싶은데 어느 부분을 수정해야 할까요?

<section class="grid-1">
      <div class="title flex-col item-baseline">
        <img src="image/merry.png" alt="" />
        <div class="countdown">
          크리스마스까지 <span id="countdown" class="countdown"></span> 남음
        </div>
      </div>
      <div class="day-15">
        <label>
          <input type="checkbox" />
          <div class="door">
            <div class="front">
              <span class="date-num">15</span>
            </div>
            <div class="back"></div>
          </div>
        </label>
      </div>
      <div class="day-16">
        <label>
          <input type="checkbox" />
          <div class="door">
            <div class="front">
              <span class="date-num">16</span>
            </div>
            <div class="back"></div>
          </div>
        </label>
      </div>
      <div class="day-17">
        <label>
          <input type="checkbox" />
          <div class="door">
            <div class="front">
              <span class="date-num">17</span>
            </div>
            <div class="back"></div>
          </div>
        </label>
      </div>
      <div class="day-18">
        <label>
          <input type="checkbox" />
          <div class="door">
            <div class="front">
              <span class="date-num">18</span>
            </div>
            <div class="back"></div>
          </div>
        </label>
      </div>
      <div class="day-19">
        <label>
          <input type="checkbox" />
          <div class="door">
            <div class="front">
              <span class="date-num">19</span>
            </div>
            <div class="back"></div>
          </div>
        </label>
      </div>
      <div class="day-20">
        <label>
          <input type="checkbox" />
          <div class="door">
            <div class="front">
              <span class="date-num">20</span>
            </div>
            <div class="back"></div>
          </div>
        </label>
      </div>
      <div class="day-21">
        <label>
          <input type="checkbox" />
          <div class="door">
            <div class="front">
              <span class="date-num">21</span>
            </div>
            <div class="back"></div>
          </div>
        </label>
      </div>
      <div class="day-22">
        <label>
          <input type="checkbox" />
          <div class="door">
            <div class="front">
              <span class="date-num">22</span>
            </div>
            <div class="back"></div>
          </div>
        </label>
      </div>
      <div class="day-23">
        <label>
          <input type="checkbox" />
          <div class="door">
            <div class="front">
              <span class="date-num">23</span>
            </div>
            <div class="back"></div>
          </div>
        </label>
      </div>
      <div class="day-24">
        <label>
          <input type="checkbox" />
          <div class="door">
            <div class="front">
              <span class="date-num">24</span>
            </div>
            <div class="back"></div>
          </div>
        </label>
      </div>
    </section>

/*css 입니다.*/
.grid-1 {
  display: grid;
  width: 80vw;
  max-width: 900px;
  margin: 2% auto;
  z-index: 1;


  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto;
  grid-gap: 20px;


  grid-template-areas:
    "text text text d19"
    "d18 d20 d23 d15"
    "d24 d24 d21 d22"
    "d24 d24 d17 d16";
}


@media only screen and (min-width: 500px) {
  .grid-1 {
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
      "text text text d19"
      "d18 d20 d23 d15"
      "d24 d24 d21 d22"
      "d24 d24 d17 d16";
  }
}


.flex-row {
  display: flex;
}


.flex-col {
  display: flex;
  flex-direction: column;
}


.item-baseline {
  align-items: baseline;
}


.title {
  display: flex;
  align-items: baseline;
  justify-content: center;
  grid-area: text;
}


.title img {
  width: 90%;
  height: auto;
}


.day-15 {
  grid-area: d15;
  background: url(image/harumichi.jpeg);
  background-position: center;
  background-size: cover;
}


.day-15 .back {
  background-image: url(image/muji.jpeg);
  background-position: center;
  background-size: cover;
}


.day-16 {
  grid-area: d16;
  background: url(image/harumichi.jpeg);
  background-position: center;
  background-size: cover;
}


.day-16 .back {
  background-image: url(image/muji.jpeg);
  background-position: center;
  background-size: cover;
}


.day-17 {
  grid-area: d17;
  background: url(image/harumichi.jpeg);
  background-position: center;
  background-size: cover;
}


.day-17 .back {
  background-image: url(image/muji.jpeg);
  background-position: center;
  background-size: cover;
}


.day-18 {
  grid-area: d18;
  background: url(image/harumichi.jpeg);
  background-position: center;
  background-size: cover;
}


.day-18 .back {
  background-image: url(image/muji.jpeg);
  background-position: center;
  background-size: cover;
}


.day-19 {
  grid-area: d19;
  background: url(image/harumichi.jpeg);
  background-position: center;
  background-size: cover;
}


.day-19 .back {
  background-image: url(image/muji.jpeg);
  background-position: center;
  background-size: cover;
}


.day-20 {
  grid-area: d20;
  background: url(image/harumichi.jpeg);
  background-position: center;
  background-size: cover;
}


.day-20 .back {
  background-image: url(image/muji.jpeg);
  background-position: center;
  background-size: cover;
}


.day-21 {
  grid-area: d21;
  background: url(image/harumichi.jpeg);
  background-position: center;
  background-size: cover;
}


.day-21 .back {
  background-image: url(image/muji.jpeg);
  background-position: center;
  background-size: cover;
}


.day-22 {
  grid-area: d22;
  background: url(image/harumichi.jpeg);
  background-position: center;
  background-size: cover;
}


.day-22 .back {
  background-image: url(image/muji.jpeg);
  background-position: center;
  background-size: cover;
}


.day-23 {
  grid-area: d23;
  background: url(image/harumichi.jpeg);
  background-position: center;
  background-size: cover;
}


.day-23 .back {
  background-image: url(image/muji.jpeg);
  background-position: center;
  background-size: cover;
}


.day-24 {
  grid-area: d24;
  background: url(image/harumichi.jpeg);
  background-position: center;
  background-size: cover;
}


.day-24 .back {
  background-image: url(image/muji.jpeg);
  background-position: center;
  background-size: cover;
}


.grid-1 input {
  display: none;
}


label {
  perspective: 1000px;
  transform-style: preserve-3d;
  cursor: pointer;


  display: flex;
  min-height: 100%;
  width: 100%;
  height: 120px;
}


.door {
  width: 100%;
  transform-style: preserve-3d;
  transition: all 300ms;
  border-radius: 10px;
}


.date-num {
  position: absolute;
  top: 12px;
  left: 12px;
  color: white;
}


.door div {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  font-size: 1.2em;
  font-weight: bold;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.2);
}


.door .back {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  transform: rotateY(180deg);
}


:checked + .door {
  transform: rotateY(180deg);
}