.reference-slider {
  max-width: 100%; }
  .reference-slider .reference-items {
    position: relative;
    max-width: 100%;
    height: clamp(50vh, 60vh, 600px);
    overflow-x: hidden; }
    .reference-slider .reference-items .reference-item {
      z-index: 0;
      transition: all 0.6s cubic-bezier(0.34, 1.36, 0.64, 1);
      position: absolute;
      height: 100%;
      overflow: hidden; }
      .reference-slider .reference-items .reference-item.w-1 {
        width: 100%; }
      .reference-slider .reference-items .reference-item.w-2 {
        width: calc((100% - 2 * 8px) / 3); }
        .reference-slider .reference-items .reference-item.w-2.active {
          width: calc((100% - 2 * 8px) / 3 * 2 + 8px); }
      .reference-slider .reference-items .reference-item.w-3 {
        width: calc((100% - 3 * 8px) / 4); }
        .reference-slider .reference-items .reference-item.w-3.active {
          width: calc((100% - 3 * 8px) / 4 * 2 + 8px); }
      .reference-slider .reference-items .reference-item.w-4 {
        width: calc((100% - 4 * 8px) / 5); }
        .reference-slider .reference-items .reference-item.w-4.active {
          width: calc((100% - 4 * 8px) / 5 * 2 + 8px); }
      .reference-slider .reference-items .reference-item.w-5 {
        width: calc((100% - 5 * 8px) / 6); }
        .reference-slider .reference-items .reference-item.w-5.active {
          width: calc((100% - 5 * 8px) / 6 * 2 + 8px); }
      .reference-slider .reference-items .reference-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: all 0.3s cubic-bezier(0.34, 1.36, 0.64, 1); }
      .reference-slider .reference-items .reference-item.active img {
        transform: scale(1.1); }
      .reference-slider .reference-items .reference-item #text-container {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        min-height: 40%;
        padding: 16px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, rgba(255, 255, 255, 0) 100%); }
      .reference-slider .reference-items .reference-item p {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: white;
        text-shadow: 0 1px 4px #0003;
        margin: 0; }
      .reference-slider .reference-items .reference-item #location {
        transform: translateY(215%);
        z-index: 1;
        font-weight: normal;
        transition: all .2s ease-out; }
      .reference-slider .reference-items .reference-item.active #location {
        transform: translateY(0); }
      .reference-slider .reference-items .reference-item #title {
        transform: translateY(50%);
        z-index: 1;
        font-weight: bold;
        font-size: 22px;
        transition: all .1s ease-out;
        opacity: 0; }
      .reference-slider .reference-items .reference-item.active #title {
        opacity: 1;
        transform: translateY(0);
        transition: all .2s ease-out .1s; }
      .reference-slider .reference-items .reference-item #url {
        transform: translateY(50%);
        z-index: 1;
        transition: all .1s ease-out;
        opacity: 0; }
        .reference-slider .reference-items .reference-item #url a {
          color: white;
          font-weight: normal;
          font-size: 16px; }
      .reference-slider .reference-items .reference-item.active #url {
        transform: translateY(0);
        opacity: 1;
        transition: all .2s ease-out .2s; }