.gallery {
  --s: 50px; /* control the skewing */
  
  display: flex;
  gap: 10px;
  margin: 10px; 
}
.gallery > img {
  flex: 1;
  min-width: 0;
  height: 300px;
  object-fit: cover;
  border-start-start-radius: var(--s) 100%;
  border-end-end-radius: var(--s) 100%;
  margin-inline-end: calc(-1*var(--s));
  corner-shape: bevel;
  cursor: pointer;
  transition: .3s linear;
}
.gallery > img:hover {
  flex: 1.6;
}
.gallery > img:is(:first-child,:hover),
.gallery > img:hover + * {
  border-start-start-radius: 0 100%;
}
.gallery > img:is(:last-child,:hover),
.gallery > img:has(+ :hover) {
  border-end-end-radius: 0 100%;
  margin-inline-end: 0;
}

body {
  background: #ffffff;
}

@supports not (corner-shape: bevel) {
  /* nothing cool for the others ... */
  .gallery > img {
    border-radius: 0!important;
    margin: 0!important;
  }
}