body
  {
  background-image: url("palazzoSalviati.jpg");
  background-repeat: no-repeat; background-position: top left; background-size: cover;
  font-family: arial,sans-serif;
  }

h2
  {
  border: 5px solid silver; background-color: rgb(255,255,255,0.8); 
  margin: 0px 10% 0px 10%; padding: 0.5ex; border-radius: 2em; 
  display: grid; grid-template-columns: min-content max-content; grid-template-rows: 1fr;
  justify-content: center; align-items: center; grid-column-gap: 1ex;
  }
h2>p { font-size: 150%; padding: 0px; margin: 0px; }
h2>p>span { font-size: 50%; }
a { text-decoration: none; color: rgb(0,70,255); }

div
  {
  display: grid; grid-template-columns: repeat(7, 150px); grid-template-rows: 1fr;
  justify-content: space-between; align-items: end; justify-items: center;
  margin:  60px 100px 60px 150px; 
  }

a>img { width: 300px; border: 1ex solid white; transform-style: preserve-3d; }

div>a { border: 1px solid gray; box-shadow: -2px -2px 1px silver; }
div>a:nth-of-type(2n) { transform: perspective(750px) rotate3d(1,1,0,45deg); }
div>a:nth-of-type(2n+1) 
  { transform: translateY(50px) perspective(750px) rotate3d(1,1,0,45deg); }
div>a:nth-of-type(2n+5)
  {
  transform: translate(-2em,-50px) perspective(750px) rotate3d(1,1,0,45deg) rotateZ(-5deg); 
  grid-row-end: span 2; border-bottom-left-radius: 1ex;
  }
div>a:hover { border-color: blue; border-width: 1px 1px 2px 3px; z-index: 1; }

