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

 .image-card{
      position:relative;
      width:100%;
      border-radius:5px;
      overflow:hidden;
      box-shadow:0 6px 18px rgba(0,0,0,.08);
      cursor:pointer;
      background:#fff;
	 
    }

    .image-card img{
      display:block;
      width:100%;
      height:220px;
      object-fit:cover;
		
    }
.image-card article{
	position: absolute;
	z-index: 1110;
	bottom: 0;
	font-size: 15px;
	font-weight: 500;
	text-align: center;
	padding-top: 8px;
	padding-bottom: 8px;
	display: block;
	width: 100%;
	color: aliceblue;
	background: rgba(4,60,68,.40);
	
		/* <<< NEW for slide-out effect >>> */
	transform: translateY(0);
	transition: .35s ease;

}
.image-card:hover article{
	transform: translateY(100%);
}

    /* The overlay that contains the description */
    .desc-overlay{
      position:absolute;
      left:0;right:0;bottom:0;
      background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 40%);
      color:white;
      padding:16px;
      transform:translateY(100%);
      transition:transform .28s cubic-bezier(.2,.9,.2,1),opacity .15s;
      opacity:0;
      pointer-events:none; /* overlay shouldn't block hover state */
    }

    /* Move in on hover or keyboard focus */
    .image-card:hover .desc-overlay,
    .image-card:focus-within .desc-overlay{
      transform:translateY(0);
      opacity:1;
      pointer-events:auto;
    }

    /* Make card focusable for keyboard users */
    .image-card:focus{
      outline:3px solid rgba(59,130,246,.25);
      outline-offset:4px;
    }

    /* Title + description styles */
    .desc-title{font-weight:700;margin:0 0 6px 0;font-size:16px}
    .desc-text{margin:0;font-size:14px;line-height:1.3;opacity:.95}

    /* Small responsive tweak */
    @media (max-width:420px){
      .image-card{width:92vw}
    }