/**
  Setup for code demo only
*/
.splide__track {
  padding:0.5vw 0;
}
/*
:root {
  --carousel-height: 25vw;
}
*/

/**
  Container
*/
.carousel {
  position: relative;
  max-width: 100vw;
}


/**
  Controls (previous/next buttons)
*/

.arrow-wrapper {
  position: absolute;
  top: 0;
  height: 100%;
  z-index: 1;
  
  display: flex;
  align-items: center;
  
  background-color: transparent;
}

  .previous-button-wrapper { left: 0; }
  .next-button-wrapper { right: 0; }

.is-control {
  background: 0;
  border: 0;
  padding: 0 10px;
  z-index: 1;
  cursor: pointer;

  opacity:0.5;
  
  transition: all 500ms linear;
}

  .is-control:hover {
    opacity:1;
  }

/* Let it inherit focus state
  .is-control:focus {
    outline: none;
    background-color: rgba(0,0,0,.8);
    color: rgba(255,255,255,1);
    border-radius: 5px;
  }
*/

.is-control svg {
  width:100px;
  height:100px;
  fill: var(--white);
}
@media screen and (max-width:1120px) {
  .is-control svg {
    width:80px;
    height:80px;
  }
}
@media screen and (max-width:767px) {
  .is-control svg {
    width:60px;
    height:60px;
  }
}

/**
  Single tile
*/
.tile {
  visibility: hidden;
  
  /*height: var(--carousel-height);*/
  height:25vw;
  position: relative;
  
  padding: 0;
  border: 0;
  background: none;
}
@media screen and (max-width:1120px) {
  .tile {
    height:33.33vw;
  }
}
@media screen and (max-width:768px) {
  .tile {
    height:50vw;
  }
}
@media screen and (max-width:520px) {
  .tile {
    height:100vw;
  }
}

  .tile.is-visible {
    visibility: visible;
  }

  .tile:focus {
    outline: 0;
  }

  .tile .project-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .tile .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    display: flex;
    padding:40px;
    justify-content: flex-start;
    align-items: flex-end;

    background-color: rgba(0,28,48,.7);
    
    transition: opacity 400ms linear;
    transition-delay: 300ms;
    opacity: 0;
  }

    .tile:focus .overlay,
    .tile:hover .overlay {
      opacity: 1;
    }

/* This seems to be causing the image to disappear. Adding a transition delay seems to help */
.splide__slide {
    transition: transform 250ms linear;
    transition-delay: 250ms;
}

.splide__slide:hover {
   transform: scale(1.05,1.05); 
   z-index:5;
}

    .project-caption {
      color: var(--white);
      font-size:1rem;
    }
    .project-caption span {
      display:block;
    }

    .caption-year {
      font-size:0.875em;
      font-weight: 500;
      line-height: 2.143;
      text-transform:uppercase;
      letter-spacing: 0.1em;
    }
    .caption-title {
      font-size:1.25em;
      line-height: 1.5;
      font-weight:700;
    }
    .caption-place {
      font-size:1.125em;
      line-height: 1.667;
    }