.cas-animal-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:24px;
}
@media (max-width:1024px){
  .cas-animal-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

.cas-animal-card{
  display:block;
  color:inherit;
  text-decoration:none;
}

.cas-animal-media{
  position:relative;
  overflow:hidden;
}

.cas-animal-track{
  display:flex;
  flex-wrap:nowrap;
  width:100%;
  transform:translateX(0);
  transition:transform 300ms ease;
  will-change:transform;
}

.cas-animal-slide{
  flex:0 0 100%;
  min-width:100%;
}

.cas-animal-slide img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:3/4;
  object-fit:cover;
  margin:0;
  padding:0;
  border:0;
}

.cas-animal-meta{
  margin-top:10px;
  text-align:center;
}

.cas-animal-name{
  margin:0;
  width:100%;
  text-align:center;
  font-size:16px;
  line-height:1.2;
}

.cas-animal-hover{
  margin-top:6px;
  font-size:13px;
  line-height:1.2;
  opacity:0;
  transform:translateY(4px);
  transition:opacity 180ms ease,transform 180ms ease;
}

.cas-animal-card:hover .cas-animal-hover{
  opacity:1;
  transform:translateY(0);
}

@media (max-width:1024px){
  .cas-animal-hover{
    opacity:1;
    transform:none;
  }
}

.cas-animal-progress{
  position:absolute;
  left:0;
  right:0;
  bottom:8%;
  height:2px;
  z-index:5;
  pointer-events:none;
}

.cas-animal-progress-line{
  position:absolute;
  top:0;
  height:2px;
  background:#000;
  opacity:0;
  pointer-events:none;
  transition:left 300ms ease,opacity 180ms ease;
}

.cas-animal-card[data-count="1"] .cas-animal-progress-line{display:none;}

.cas-animal-card:hover .cas-animal-progress-line{opacity:1;}
@media (max-width:1024px){
  .cas-animal-progress-line{opacity:1;}
}

.cas-animal-card[data-count="2"] .cas-animal-progress-line{width:50% !important;}
.cas-animal-card[data-count="3"] .cas-animal-progress-line{width:33.3333% !important;}

.cas-animal-card[data-count="2"][data-index="0"] .cas-animal-progress-line{left:0 !important;}
.cas-animal-card[data-count="2"][data-index="1"] .cas-animal-progress-line{left:50% !important;}

.cas-animal-card[data-count="3"][data-index="0"] .cas-animal-progress-line{left:0 !important;}
.cas-animal-card[data-count="3"][data-index="1"] .cas-animal-progress-line{left:33.3333% !important;}
.cas-animal-card[data-count="3"][data-index="2"] .cas-animal-progress-line{left:66.6667% !important;}

.cas-animal-arrow{
  position:absolute;
  top:0;
  bottom:0;
  width:18%;
  left:auto;
  right:auto;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
  outline:none;
  -webkit-appearance:none;
  appearance:none;
  cursor:pointer;
  opacity:0;
  z-index:6;
  transition:opacity 180ms ease;
}

.cas-animal-arrow:hover,
.cas-animal-arrow:focus,
.cas-animal-arrow:active{
  background:transparent;
  box-shadow:none;
  outline:none;
}

.cas-prev{left:0;}
.cas-next{right:0;}

.cas-animal-card:hover .cas-animal-arrow{opacity:1;}

.cas-animal-arrow::before{
  content:"";
  position:absolute;
  top:50%;
  width:10px;
  height:10px;
  border-right:2px solid #000;
  border-bottom:2px solid #000;
  transform:translateY(-50%) rotate(135deg);
}

.cas-prev::before{left:22px;}
.cas-next::before{
  right:22px;
  transform:translateY(-50%) rotate(-45deg);
}

@media (max-width:1024px){
  .cas-animal-arrow{display:none;}
}