/* =========================
 Reference Latest
========================= */
.reference-latest { position: relative; z-index: 10; } 
.reference-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } 

.reference-item { position: relative; overflow: hidden; border-radius: 15px; aspect-ratio: 386 / 437; background: #f5f5f5; } 

/* 이미지 */
.reference-img { position: absolute; inset: 0; width: 100%; height: 100%; } 


.reference-img img { display: block; width: 100%; height: 100%; object-fit: cover; } 



/* =========================
 하단 정보 영역
========================= */

.reference-info { position: absolute; left: 0; bottom: 0; z-index: 2; width: 100%; height: 0; padding: 0 3rem; box-sizing: border-box; background: #f9f9f9; overflow: hidden; transition:
 height 0.45s ease,
 padding 0.45s ease; text-align: left; /* display: flex; */
 /* flex-direction: column; */
 /* justify-content: center; */}
.reference-info a { display: flex; flex-direction: column; justify-content: center; padding: 0 3rem; } 
.reference-info::after { content: ""; position: absolute; bottom: 0; right: 0; width: 190px; height: 190px; background:url(../../../img/logo_bg_small.png) no-repeat center center / cover; z-index: -1; } 

/* =========================
 정보 내용
========================= */

.reference-category { margin-bottom: 2rem; color: #1683ff; font-size: 1.7rem; font-weight: 600; line-height: 1.4; } 

.reference-title { margin-bottom: 1rem; font-size: 2.1rem; font-weight: 700; line-height: 1.4; } 

.reference-title a { color: #111; text-decoration: none; } 

.reference-meta { color: #555; } 

.reference-meta p { font-size: 1.6rem; margin: 0.2rem 0; } 
.reference-meta p b { font-weight: 400; } 
.reference-meta span { display: inline-block; margin: 0 0.5rem; } 


/* hover */
.reference-item:hover .reference-info { height: 68%; padding: 3rem; text-align: left; } 


/* =========================
 반응형
========================= */

@media (max-width: 1200px){
 .reference-grid { grid-template-columns: repeat(3, 1fr); } 
 }

@media (max-width: 900px){
 .reference-grid { grid-template-columns: repeat(2, 1fr); } 
 }

@media (max-width: 600px){
 .reference-grid {/* grid-template-columns: 1fr; */gap: 1.8rem;} 

 .reference-item { aspect-ratio: 386 / 437; } 
 .reference-item:hover .reference-info{
    padding: 1.4rem;
    height: 100%;
}
 .reference-info a{
    padding: 0 1rem;
}
 .reference-category{
    font-size: 14px;
    margin-bottom: 1rem;
}
 .reference-title{
    font-size: 1.6rem;
}
 .reference-meta p{
}
 }