body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background: rgb(218, 217, 217);
  width: 100%;
  height: auto;
  font-family: "Cabin", sans-serif;
}
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
a {
  color: inherit;
}
.menu {
  height: 200px;
}
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  margin: 0 auto;
  padding: 75px 0px 125px 0px;
}
.container div {
  transform: translateY(0px);
  transition: 0.5s;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  -webkit-box-shadow: 0px 0px 59px -39px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 0px 59px -39px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 59px -39px rgba(0, 0, 0, 0.75);
}
.container div:hover {
  animation: hover 0.5s ease;
  transform: translateY(-20px);
  cursor: pointer;
}
.container div:hover:nth-child(odd) {
  -webkit-box-shadow: 0px 0px 90px -39px rgba(180, 94, 94, 0.75);
  -moz-box-shadow: 0px 0px 90px -39px (180, 94, 94, 0.75);
  box-shadow: 0px 0px 90px -39px (180, 94, 94, 0.75);
}
.container div:hover:nth-child(even) {
  -webkit-box-shadow: 0px 0px 90px -39px rgba(40, 101, 233, 0.75);
  -moz-box-shadow: 0px 0px 90px -39px (40, 101, 233, 0.75);
  box-shadow: 0px 0px 90px -39px (40, 101, 233, 0.75);
}
.long-img {
  width: 275px;
  height: 80%;
  object-fit: cover;
  background-size: cover;
}
.small-img {
  width: 275px;
  height: 70%;
  object-fit: cover;
  background-size: cover;
}
div .long-img {
  margin: auto;
}
div .small-img {
  margin: auto;
}
.title {
  width: 275px;
  margin: auto;
}
.title:hover {
  text-decoration: underline;
}
.div1 {
  grid-area: 1 / 1 / 4 / 2;
  height: auto;
  width: 325px;
  background: white;
  margin: 0 auto;
}
.div2 {
  grid-area: 1 / 2 / 3 / 3;
  height: auto;
  width: 325px;
  background: white;
  margin: 0 auto;
}
.div3 {
  grid-area: 1 / 3 / 4 / 4;
  height: auto;
  width: 325px;
  background: white;
  margin: 0 auto;
}
.div4 {
  grid-area: 1 / 4 / 3 / 5;
  height: auto;
  width: 325px;
  background: white;
  margin: 0 auto;
}
.div5 {
  grid-area: 3 / 2 / 6 / 3;
  height: 325px;
  width: 325px;
  background: white;
  margin: auto;
}

.div6 {
  grid-area: 3 / 4 / 6 / 5;
  height: 325px;
  width: 325px;
  background: white;
  margin: auto;
}
.div7 {
  grid-area: 4 / 1 / 7 / 2;
  height: 325px;
  width: 325px;
  background: white;
  margin: auto;
}
.div8 {
  grid-area: 4 / 3 / 7 / 4;
  height: 325px;
  width: 325px;
  background: white;
  margin: auto;
}
.div9 {
  grid-area: 6 / 2 / 9 / 3;
  height: 500px;
  width: 325px;
  background: white;
  margin: 0 auto;
}
.div10 {
  grid-area: 6 / 4 / 9 / 5;
  height: auto;
  width: 325px;
  background: white;
  margin: 0 auto;
}
.div11 {
  grid-area: 7 / 1 / 9 / 2;
  height: auto;
  width: 325px;
  background: white;
  margin: 0 auto;
}
.div12 {
  grid-area: 7 / 3 / 9 / 4;
  height: auto;
  width: 325px;
  background: white;
  margin: 0 auto;
}

.bottom {
  height: 400px;
  background: black;
}

nav,
ul,
li,
a {
  text-decoration: none;
  list-style: none;
}
.nav2 {
  display: flex;
  justify-content: space-between;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}
.nav2 > ul {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 75px;
  flex-wrap: wrap;
}
.nav2-links {
  font-family: Arial, Helvetica, sans-serif;
  color: black;
  font-weight: 600;
  padding: 0 25px 0 25px;
}
.nav2 > ul > li:nth-child(even) {
  border-right: 1px solid black;
  border-left: 1px solid black;
}
.logo-text {
  display: flex;
  align-items: center;
  font-size: 30px;
}