a {
  display: block;
  color: #1d1d1d;
  text-decoration: none;
}

/* ===== IMG1 ANIMATIE ===== */
@supports (view-transition-name: change) {
  @view-transition {
    navigation: auto;
  }

  ::view-transition-group(*) {
    animation-duration: 1s;
  }

  #img1 {
    view-transition-name: change;
  }

  ::view-transition-old(change),
  ::view-transition-new(change) {
    animation-duration: 0.1s;
    animation-timing-function: ease-in-out;
  }
}

@supports not (view-transition-name: change) {
  #img1 {
    transition: transform 1s ease-in-out, opacity 1s ease-in-out;
  }

  #img1.entering {
    transform: scale(1);
    opacity: 0.9;
  }

  #img1.leaving {
    transform: scale(1);
    opacity: 0.6;
  }
}

/* ===== IMG2 ANIMATIE ===== */
@supports (view-transition-name: change2) {
  @view-transition {
    navigation: auto;
  }

  ::view-transition-group(*) {
    animation-duration: 1s;
  }

  #img2 {
    view-transition-name: change2;
  }

  ::view-transition-old(change2),
  ::view-transition-new(change2) {
    animation-duration: 0.1s;
    animation-timing-function: ease-in-out;
  }
}

@supports not (view-transition-name: change2) {
  #img2 {
    transition: transform 1s ease-in-out, opacity 1s ease-in-out;
  }

  #img2.entering {
    transform: scale(1);
    opacity: 0.9;
  }

  #img2.leaving {
    transform: scale(1);
    opacity: 0.6;
  }
}

/* ===== IMG3 ANIMATIE ===== */
@supports (view-transition-name: change3) {
  @view-transition {
    navigation: auto;
  }

  ::view-transition-group(*) {
    animation-duration: 1s;
  }

  #img3 {
    view-transition-name: change3;
  }

  ::view-transition-old(change3),
  ::view-transition-new(change3) {
    animation-duration: 0.1s;
    animation-timing-function: ease-in-out;
  }
}

@supports not (view-transition-name: change3) {
  #img3 {
    transition: transform 1s ease-in-out, opacity 1s ease-in-out;
  }

  #img3.entering {
    transform: scale(1);
    opacity: 0.9;
  }

  #img3.leaving {
    transform: scale(1);
    opacity: 0.6;
  }
}

/* ===== IMG4 ANIMATIE ===== */
@supports (view-transition-name: change4) {
  @view-transition {
    navigation: auto;
  }

  ::view-transition-group(*) {
    animation-duration: 1s;
  }

  #img4 {
    view-transition-name: change4;
  }

  ::view-transition-old(change4),
  ::view-transition-new(change4) {
    animation-duration: 0.1s;
    animation-timing-function: ease-in-out;
  }
}

@supports not (view-transition-name: change4) {
  #img4 {
    transition: transform 1s ease-in-out, opacity 1s ease-in-out;
  }

  #img4.entering {
    transform: scale(1);
    opacity: 0.9;
  }

  #img4.leaving {
    transform: scale(1);
    opacity: 0.6;
  }
}

/* ===== IMG5 ANIMATIE ===== */
@supports (view-transition-name: change5) {
  @view-transition {
    navigation: auto;
  }

  ::view-transition-group(*) {
    animation-duration: 1s;
  }

  #img5 {
    view-transition-name: change5;
  }

  ::view-transition-old(change5),
  ::view-transition-new(change5) {
    animation-duration: 0.1s;
    animation-timing-function: ease-in-out;
  }
}

@supports not (view-transition-name: change5) {
  #img5 {
    transition: transform 1s ease-in-out, opacity 1s ease-in-out;
  }

  #img5.entering {
    transform: scale(1);
    opacity: 0.9;
  }

  #img5.leaving {
    transform: scale(1);
    opacity: 0.6;
  }
}

/* ===== IMG6 ANIMATIE ===== */
@supports (view-transition-name: change6) {
  @view-transition {
    navigation: auto;
  }

  ::view-transition-group(*) {
    animation-duration: 1s;
  }

  #img6 {
    view-transition-name: change6;
  }

  ::view-transition-old(change6),
  ::view-transition-new(change6) {
    animation-duration: 0.1s;
    animation-timing-function: ease-in-out;
  }
}

@supports not (view-transition-name: change6) {
  #img6 {
    transition: transform 1s ease-in-out, opacity 1s ease-in-out;
  }

  #img6.entering {
    transform: scale(1);
    opacity: 0.9;
  }

  #img6.leaving {
    transform: scale(1);
    opacity: 0.6;
  }
}

/* ===== IMG7 ANIMATIE ===== */
@supports (view-transition-name: change7) {
  @view-transition {
    navigation: auto;
  }

  ::view-transition-group(*) {
    animation-duration: 2s;
  }

  #img7 {
    view-transition-name: change7;
  }

  ::view-transition-old(change7),
  ::view-transition-new(change7) {
    animation-duration: 0.1s;
    animation-timing-function: ease-in-out;
  }
}

@supports not (view-transition-name: change7) {
  #img7 {
    transition: transform 1s ease-in-out, opacity 1s ease-in-out;
  }

  #img7.entering {
    transform: scale(1);
    opacity: 0.9;
    opacity: 0.1;
  }

  #img7.leaving {
    transform: scale(1);
    /* opacity: 0.6; */
    /* opacity: 1; */
  }
}