::before,
::after,
* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  object-fit: cover;
}

:root {
  --primary-color: purple;
  --secondary-color: yellowgreen;
  --spacing-s: 5px;
  --spacing-m: 20px;
  --bg-color: rgba(0, 0, 0, 0);
}

body {
  font-family: "Momo Signature", cursive;
  color: rgb(53, 53, 53);
}

main {
  height: 100vh;
  background-image: url("./images/sunrise.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.panel-window-container {
  display: flex;
  height: 100%;
}

.panel {
  flex-grow: 1;
  transition: all 0.5s ease-in-out;
  cursor: pointer;
  margin: 0px var(--spacing-m);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  color: white;
}

.open-panel {
  flex-grow: 2;
}

.panel::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  transition: all 0.5s ease-in-out;
  background-color: var(--bg-color);
}

.panel h1 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  text-align: center;
  overflow: hidden;
}

.panel h1 span:nth-child(1) {
  transform: translateY(-100px);
  margin-top: var(--spacing-m);
}

.panel h1 span:nth-child(3) {
  transform: translateY(100px);
  margin-bottom: var(--spacing-m);
}

.panel * {
  transition: all 0.5s ease-in-out;
}

.panel1 {
  background-image: url("./images/animal.jpg");
}
.panel2 {
  background-image: url("./images/ice.jpg");
}
.panel3 {
  background-image: url("./images/rowing.jpg");
}
.panel4 {
  background-image: url("./images/sport.jpg");
}
.panel5 {
  background-image: url("./images/tree.jpg");
}

/* .panel:hover {
  flex-grow: 2;
}

.panel:hover h1 span {
  transform: initial;
}

.panel:hover::before {
  background-color: rgba(0, 0, 0, 0.4);
} */