@charset "utf-8";
/* CSS Document */



.accordion{max-width:1140px;margin:0 auto;padding:20px 20px;}
h1{font-size:34px;margin-bottom:24px;text-transform:uppercase;letter-spacing:1px;}

.gallery-wrap{display:flex;height:70vh;gap:6px;}
.item{flex:1;background-size:cover;background-position:center;border-radius:6px;transition:flex .6s ease, height .45s ease;cursor:pointer;}

.item:hover{flex:7;} /* desktop accordion hover */

/* Images */
.item-1{background-image:url("../images/digital-illustration-photoshop.jpg");}
.item-2{background-image:url("../images/creative-graphic-designing.jpg");}
.item-3{background-image:url("../images/typography-adobe-illustrator.jpg");}
.item-4{background-image:url("../images/digital-painting-graphic-design.jpg");}
.item-5{background-image:url("../images/fashion-illustration-course.jpg");}

/* Hide checkbox */
.cb-hidden{position:absolute;opacity:0;pointer-events:none;}

/* MOBILE Styles */
@media(max-width:600px){
  .gallery-wrap{flex-direction:column;height:auto;gap:12px;}
  .item{height:160px;flex:none;transition:height .45s ease;}

  /* Expand only selected item */
  .cb-hidden:checked + .item{
      height:60vh;
      transform:scale(1.01);
  }

  .item:hover{flex:none;} /* disable hover accordion */
}

@media(max-width:420px){
  .item{height:140px;}
  .cb-hidden:checked + .item{height:65vh;}
}