/* grid styles ------------------------------------ */

  @media (min-width: 600px) {
  main {display: grid; grid-template-columns: 3fr 3fr 1fr;}

  .info1 {grid-column: span 1; grid-row: span 2;}  
  .info2 {grid-column: span 1;}  
  .figure1 {grid-column: span 2; grid-row: span 2;}
}
td {height: 50px; vertical-align: top;}
div a:visited { color: blue;}
div a:hover { color: red;}

/* flex styles -------------------------------------- */
.logo {display: flex; align-items: center; text-decoration: none;}

/* generic styles ----------------------------------- */
body {max-width: 1600px; margin: 0 auto; font-family: 'Raleway', sans-serif; background-color: #D6CE89}

header {padding: 10px;}

.logo-img {margin-right: 10px; height: 60px; transform: scaleX(-1);}

.logo-text {
  font-family: 'Lobster', cursive;
  font-size: 2.6em;
  color: #c3bab9;
  text-shadow:
   -1px -1px 0 #615655,  
    1px -1px 0 #615655,
    -1px 1px 0 #615655,
     1px 1px 0 #615655;
}

.figure-img {display: block; width: 100%; height: 100%; object-fit: cover;}

.info1, .info2 {padding: 30px; background-color: #333; color: #D6CE89; line-height: 1.8em;}

h2 {font-size: 3.2em; margin-bottom: 1em;}
h3 {font-size: 2.4em; margin-bottom: 1em;}
p {margin-bottom: 1em;}

.info-link {text-decoration: none; color: #ff9900;}
footer {grid-column: span 3; padding: 20px; text-align: center; background-color: #D6CE89; color: blue; height: 80px;}