.paris-illos {
  display: flex;
  grid-gap: 1.25rem;
  align-items: stretch;
  
  padding-left: var(--document-margin);
  padding-right: var(--document-margin);
  
  overflow-x: auto;
  overflow-y: visible;

  -webkit-overflow-scrolling: touch;
  -ms-scroll-snap-type: x mandatory;
  scroll-snap-type: x mandatory;
  -ms-scroll-snap-points-x: repeat(100%);
  scroll-snap-points-x: repeat(100%);
  scrollbar-width: none;
  -ms-overflow-style: none;
}

@media (min-width: 768px) {
  
  .paris-illos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 3.75rem;
    row-gap: 3.75rem;
    overflow-x: initial;
  }  
}

@media (min-width: 1024px) {
  
  .paris-illos {
    grid-template-columns: repeat(4, 1fr);
    column-gap: 5rem;
    row-gap: 5rem;
  }  
}

.paris-illos > a {
  position: relative;
  display: block;
  min-width: 14rem;
  scroll-snap-align: center;  
  text-decoration: none;
  border: 2px solid var(--raisin);
  border-radius: var(--border-radius-md);
}

@media (min-width: 480px) {
  
  .paris-illos > a {
    min-width: 16rem;
  }  
}

@media (min-width: 768px) {
  
  .paris-illos > a {
    min-width: auto;
    border: none;
  }
  
  .paris-illos > a:hover img {
    transform: rotate(3deg);
    opacity: .89;
  }
  
  .paris-illos > a:nth-of-type(2n+1):hover img {
    transform: rotate(-3deg);
  }
}

.paris-illos .info {
  padding: 2.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

@media (min-width: 768px) {
  
  .paris-illos .info {
    padding: 0;
  }
}

.paris-illos .info > img {
  width: 100%;
  transition: transform 150ms 20ms cubic-bezier(0, 0, .2, 1);
}

.punch-holes > span {
  position: absolute;
  width: .75rem;
  height: .75rem;
  
  border: 2px solid var(--raisin);
  border-radius: 100%;
}

.punch-holes > span:nth-of-type(1) { top: .625rem; left: .625rem; }
.punch-holes > span:nth-of-type(2) { top: .625rem; right: .625rem; }
.punch-holes > span:nth-of-type(3) { bottom: .625rem; left: .625rem; }
.punch-holes > span:nth-of-type(4) { bottom: .625rem; right: .625rem; }

@media (min-width: 768px) {
  
  .punch-holes {
    display: none;
  }  
}

.hoods {
  display: grid;
  place-items: center;
  
  padding-left: var(--document-margin);
  padding-right: var(--document-margin);
}

.hoods > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  
  max-width: 52rem;
  
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: .5rem;
}

.hoods > ul li {
  display: flex;
  align-items: center;
}

.hoods > ul li::after {
  content: "/";
  display: block;
  
  margin-left: .75rem;
  margin-right: .75rem;
}

.hoods > ul li:last-of-type::after {
  display: none;
}

.hoods > ul li a {
  text-decoration: none;
}

.hoods > ul li a:hover {
  text-decoration: underline;
}

.hoods > ul li a.uninhabited {
  pointer-events: none;
  opacity: .44;
}

@media (min-width: 768px) {
  
  .hoods > ul {
    row-gap: .75rem;
  }
  
  .hoods > ul li::after {
    margin-left: .875rem;
    margin-right: .875rem;
  }  
}