nav {
  height: calc(var(--nav-height) + 2lh);
}

main {
  interpolate-size: allow-keywords;

  section.images {


    column-gap: .5em;
    /* columns: 3 150px;
  */

    a {
      margin-bottom: var(--gutter);
      display: block;
    }

    picture {
      display: flex;
      width: 100%;
      height: auto;

      transition: all 0.3s ease;

      img {

        display: block;
      }
    }

    .portrait {
      aspect-ratio: 4 / calc(5 + 0.1);

      img {
        aspect-ratio: 4 / calc(5 + 0.1);
      }

    }

    .landscape,
    .square {
      aspect-ratio: 8/5;


      img {
        aspect-ratio: 8/5;
      }


    }

    img {
      width: 100%;
      height: auto;
      object-fit: cover;
    }
  }
}

section.images {
  transition: all 300ms ease;
  animation: appear 300ms ease-in forwards;
}

@keyframes appear {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.image {
  text-decoration: none !important;
  width: calc(33% - 3px);
  display: flex;
  position: relative;

  div.caption {
    opacity: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    background: transparent;
    display: flex;
    flex-direction: column;
    gap: 0;

    padding: calc(0.6rem);
    /* padding-block: calc(.6rem * 2);
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, 1fr); */
    color: black;
    /* transition: background 0.3s ease, opacity 0.3s ease; */
    /* background: linear-gradient(180deg, rgba(255, 255, 255, 0) 13%, rgba(255, 255, 251, 1) 84%); */
    background-color: rgb(255, 255, 255);
    /* backdrop-filter: blur(4px); */
    /* padding-top: 5rem; */
    pointer-events: none;



    span.date,
    span.localisation {
      grid-row: 1;
      color: black;
    }

    a {}

    span.caption {}
  }

  &:hover {
    div.caption {
      opacity: 1;
    }
  }
}

section.images:has(picture:hover) picture:not(:hover) {
  /* scale: .99; */
}

@media (width <=968px) {
  nav {
    height: calc(var(--nav-height) + 0lh);
  }

  .top {
    position: relative;
    top: auto;
    right: auto;
    bottom: 0;
  }

  picture {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  .images {
    width: 100%;
  }

  .image {
    div.caption {
      position: relative;
      opacity: 1;
      display: block;
      left: auto;

      margin-top: 0;
      margin-bottom: var(--gutter);
    }
  }

  .images .image {
    width: 100% !important;
  }

  .mobile.filters {
    .bottom-nav {
      display: flex;
      flex-direction: row;

      align-items: center;
      justify-content: space-between;
    }

    .button {
      width: fit-content;
    }

    position: sticky;
    bottom: 0;
    display: flex;
    flex-direction: column;

    width: calc(100vw - (var(--bm) * 4));
    /* min-height: var(--nav-height); */
    padding-block: var(--bm);
    gap: var(--gutter);
    /* transition: all var(--easing-d) var(--easing); */
    height: auto;

    input {
      display: none;
    }

    input#open-filters:checked~form {
      display: flex;
      opacity: 1;
      height: 100%;

      margin-inline: calc(50% - 50vw);

      width: 100vw;
      padding-inline: var(--bm);

      @starting-style {
        /* opacity: 0; */
        height: 0px;
      }
    }

    >form {
      display: none;
      /* opacity: 0; */
      height: 1px;
      /* transition: all .3s ease; */
      flex-direction: row;
      gap: var(--gutter);
      transition-behavior: allow-discrete;
      overflow-x: scroll;
      flex-wrap: nowrap;
      list-style: none;
      width: calc(100vw - (var(--bm) * 4));

      input {
        display: none;
      }

      label {
        opacity: 0.3;

        transition: opacity 0.3s ease;
        cursor: pointer;
      }

      input:checked~label {
        opacity: 1 !important;
      }

      li {
        width: fit-content;
        display: block;
        white-space: nowrap;
      }
    }
  }
}