body {
    background: url(images/background-2.jpg);
    background-attachment: fixed;
    display: grid;
    justify-content: center;
    margin: 50px;
}

main {
    width: 800px;
    background: antiquewhite;
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    align-items: center;
    & a {text-decoration: none; color: rgb(0, 0, 0); font-size: 1.2em; font-family: Arial, Helvetica, sans-serif; font-weight: bold;}
    & a:hover {color: coral;}
    & .main-image {grid-column: auto / span 2; margin: 20px 20px 20px 0px; clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);}
    & .main-image img {width: 100%;}
    & .main-nav {grid-column: auto / span 9;}
    & .main-title {grid-column: auto / span 12;}
    & .main-title img {width: 100%;}


}

@media only screen and (max-width: 950px) {
  body {margin: 0px;}
  main {width: 90vw;}
  .main-image, .main-nav {grid-column: auto / span 12;}
}