@import "reset.css";
@import "main.css";
@import "shoplogo.css";


/* PC (해상도 1024px)*/
@media all and (min-width:1024px) { 
  .container{
    width: 60%;
    height: 100vh;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(5, 1fr);
    grid-gap: 1rem;
    grid-template-areas: 
    'a b b'
    'a d c'
    'a e c'
    'g g f'
    'h h h';
    
  } 
  .max{
    display: block;
  }
  .min{
    display: none;
  }
}

/* 테블릿 가로, 테블릿 세로 (해상도 768px ~ 1023px)*/
@media all and (min-width:481px) and (max-width:1023px) { 
  .container{
    width: 90%;
    height: 150vh;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(7, 1fr);
    grid-gap: 1rem;
    grid-template-areas: 
    'a b'
    'a b'
    'a c'
    'd d'
    'e f'
    'e g'
    'h h';
    
  } 
  .max{
    display: none;
  }
  .min{
    display: block;
  }
}

/* 모바일 가로, 모바일 세로 (해상도 480px ~ 767px)*/
@media all and (max-width:480px) { 
  .container{
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: 250px;
    grid-gap: 1rem;
    grid-template-areas: 
    'a' 'b' 'c' 'd' 'e' 'f' 'g' 'h';
  } 
  .max{
    display: none;
  }
  .min{
    display: block;
  }

}
  @keyframes fadeIn{
    from{
        opacity:0;
        transform: translateY(50px);
        
    }
    to{
        opacity:1;
        transform: none;
    }
  }
  @keyframes scaleUp{
    from{
        opacity:1;
        ttransform: scale(1);
    }
    to{
        opacity:0.7;
        transform: scale(1.5); /* 이미지를 20% 확대 */
    }  
  }
  
  @keyframes scaleDn{
    from{
        opacity:1;
        transform: scale(1.5);
    }
    to{
        opacity:1;
        transform: scale(1); /* 이미지를 20% 확대 */
    }  
  }

.image-container {
  overflow: hidden; /* 컨테이너 내부에서 이미지가 확대되어도 박스 크기를 넘지 않도록 함 */
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  box-shadow: rgba(0,0,0,0.5) 0px 8px 16px -8px,
    rgba(0,0,0,0.024) 0px -6px 16px -6px;
  border-radius: 10px;
  opacity: 0;
  animation: fadeIn .5s ease-in-out forwards;
  background-color: black;
  /* transition: transform 10s ease-in-out ;
  transform: scale(1); */
  
}


.image{
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: scaleDn .5s ease-in-out forwards;
  
}
.image:hover {
  animation: scaleUp .5s ease-in-out forwards;
  
}

.image-text {
  font-size: 20px;
  font-style: bold;
  /* padding:20px;
  border-radius: 10px;
  background-color: rgba(255,255,255,0.3); */
  position: absolute; /* 컨테이너 내에서 절대 위치 설정 */
  top: 50%; /* 상단으로부터 50% 위치 */
  left: 50%; /* 왼쪽으로부터 50% 위치 */
  transform: translate(-50%, -50%); /* 정확한 중앙 정렬을 위해 자신의 크기의 50%만큼 이동 */
  color: rgb(255, 255, 255); /* 글자 색상, 필요에 따라 조정 */
  text-align: center; /* 텍스트 중앙 정렬 */
  z-index: 10; /* 이미지 위에 텍스트가 오도록 z-index 설정 */
  
}

.image1{ 
  grid-area : a;
  animation-delay: 0s;
}
.image2{
  grid-area : b;
  animation-delay: 0.2s;
}
.image3{
  grid-area : c;
  animation-delay: 0.4s;
}
.image4{
  grid-area : d;
  animation-delay: 0.6s;
}
.image5{
  grid-area : e;
  animation-delay: 0.8s;
}
.image6{
  grid-area : f;
  animation-delay: 1s;
}
.image7{
  grid-area : g;
  animation-delay: 1.2s;
}

.image8{
  grid-area : h;
  animation-delay: 1.4s;
}