/* 33차 - 기존 예시 일러스트 3개 대신 수강생 작품 이미지 2개.
   데스크톱은 제공된 참고 화면의 카드 이미지를 그대로 사용합니다.
   작은 화면은 제공 이미지에서 작품 부분을 분리하고 가독성 높은 HTML 제목을 표시합니다. */
#main #gallery.gallery-section{background:#faf9f6;}
#main #gallery .student-gallery-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(18px,2.7vw,46px);
  align-items:stretch;
}
#main #gallery .student-gallery-card{
  position:relative;
  display:block;
  border-radius:clamp(18px,1.8vw,27px);
  aspect-ratio:930/530;
  overflow:hidden;
  min-width:0;
  isolation:isolate;
  outline-offset:4px;
  background:#eeeae5;
  box-shadow:0 0 0 1px #e9e8e3;
  transition:transform .28s ease,box-shadow .28s ease;
}
#main #gallery .student-gallery-card:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 27px rgba(42,48,40,.11);
}
#main #gallery .student-gallery-card:focus-visible{
  outline:3px solid #72927d;
}
#main #gallery .student-gallery-picture,
#main #gallery .student-gallery-picture img{
  display:block;
  height:100%;width:100%;
}
#main #gallery .student-gallery-picture img{
  object-fit:cover;
  transition:transform .4s ease;
}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  #main #gallery .student-gallery-card:hover .student-gallery-picture img{transform:scale(1.015);}
}
/* Desktop card artwork contains the reference's labels and arrow as part of the supplied image. */
#main #gallery .student-gallery-caption{display:none;}
@media(max-width:700px){
  #main #gallery .student-gallery-grid{grid-template-columns:1fr;gap:17px;}
  #main #gallery .student-gallery-card{aspect-ratio:1.48;border-radius:19px;}
  #main #gallery .student-gallery-picture img{object-fit:cover;object-position:center 48%;}
  #main #gallery .student-gallery-caption{
    position:absolute;
    z-index:1;
    left:0;right:0;bottom:0;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:5px;
    padding:58px 19px 17px;
    color:#fff;
    background:linear-gradient(to top,rgba(28,42,35,.89) 0%,rgba(28,42,35,.54) 50%,transparent 100%);
  }
  #main #gallery .student-gallery-type{font:700 10px/1.3 Arial,sans-serif;letter-spacing:.16em;}
  #main #gallery .student-gallery-caption strong{font-size:20px;line-height:1.3;font-weight:750;letter-spacing:-.05em;}
  #main #gallery .student-gallery-description{font-size:11px;line-height:1.5;color:#f3f4ef;}
  #main #gallery .student-gallery-arrow{
    position:absolute;right:20px;bottom:24px;
    height:33px;width:33px;border:1px solid rgba(255,255,255,.8);border-radius:50%;
    font-size:20px;line-height:31px;text-align:center;
  }
}
@media(max-width:360px){
  #main #gallery .student-gallery-caption{padding:48px 15px 14px;}
  #main #gallery .student-gallery-caption strong{font-size:17px;}
  #main #gallery .student-gallery-description{font-size:10px;}
  #main #gallery .student-gallery-arrow{right:13px;bottom:21px;width:29px;height:29px;font-size:18px;line-height:27px;}
}
@media(prefers-reduced-motion:reduce){
  #main #gallery .student-gallery-card,
  #main #gallery .student-gallery-picture img{transition:none;}
}