#intro {
 display: flex;
 flex-direction: column;
 justify-content: center;
 background: url("https://www.eccloudone.com/scroll3/media/bg.jpg") no-repeat center center;
 background-size: cover;
}
.full-screen {
 display: flex;
 width: 100%;
 height: 100vh;
 overflow: hidden;
}

#panels #panels-container {
 height: 100vh;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -ms-flex-wrap: nowrap;
 flex-wrap: nowrap;
 padding: 0;
 overflow: hidden;
}

.clr-2 {
 background-color: var(--clr-2);
 color: #000;
}
.clr-7 {
 background-color: var(--clr-7);
 color: #000;
}
.button {
 display: inline-block;
 padding: 1rem 1.5rem;
 border-radius: 10px;
 text-decoration: none;
 font-size: clamp(1.2rem, calc(1.2rem + 1vw), 2rem);
 line-height: 1.2;
}
.intro-content {
 padding: 3rem 1rem;
 background-color: var(--clr-1);
 text-align: center;
}
#panel-1 {
 background-color: var(--clr-3);
 font-size: clamp(1.2rem, calc(1.2rem + 1vw), 2rem);
}
#panel-1 figure {
 max-width: 500px;
}

#panel-1 .container {
 display: grid;
 grid-gap: 2.5rem;
}
@media (min-width: 900px) {
 #panel-1 .container {
  grid-template-columns: 1fr 37ch;
 }
}

#panel-1 figcaption {
 text-align: center;
 padding: 0.5rem 0;
 background-color: var(--clr-4);
}
.container {
 width: 100%;
 max-width: 1140px;
 margin: auto;
 padding: 0 1rem;
}
.stack > * + * {
 margin-top: 1.5rem;
}
#panel-2 {
 background-color: var(--clr-5);
}
#panel-3 {
 background-color: var(--clr-6);
}
#panel-3 .container {
 display: grid;
 grid-gap: 2rem;
 justify-content: center;
}
.button-container {
 display: grid;
 grid-gap: 1rem;
}
.link {
 text-decoration: underline;
 font-size: clamp(1.2rem, calc(1.2rem + 1vw), 2rem);
 color: inherit;
 text-align: center;
}
#panel-3 h2 {
 text-align: center;
}
#panel-3 .info {
 font-weight: normal;
 display: block;
}
.button-container .button:hover #arrow-right {
 animation: moveArrow 1s infinite alternate;
}
.flex-center {
 display: flex;
 gap: 1rem;
 align-items: center;
}
.button-container .button:hover {
 background-color: var(--clr-2);
}
@keyframes moveArrow {
 0% {
  transform: translateX(0px);
 }
 100% {
  transform: translateX(25px);
 }
}
.panel-3-audio {
 visibility: hidden;
 opacity: 0;
 height: 0;
}
video {
 border: 3px solid white;
}
#pop-up {
 position: fixed;
 top: 0%;
 left: 50%;
 transform: translate(-50%, 25%);
 overflow-y: scroll;
 width: 80vw;
 max-width: 900px;
 margin: auto;
 height: 70vh;
 color: var(--clr-3);
 padding: 1rem;
 background-color: white;
 visibility: hidden;
 opacity: 0;
 transition: opacity 0.2s ease-in;
}
#pop-up.is-active {
 visibility: visible;
 opacity: 1;
}
#pop-up-header {
 display: flex;
 justify-content: flex-end;
 height: 3rem;
 margin-bottom: 2rem;
}

.pop-up-content {
 max-width: 800px;
 margin: 0 auto;
}
.pop-up-content > * {
 display: grid;
 grid-template-columns: 300px 1fr;
 gap: 1rem;
 align-items: center;
 margin-bottom: 2rem;
}
.pop-up-content img {
 height: auto;
}
.pop-up-content p {
 font-size: 1.2rem;
}
@media (max-width: 650px) {
 .pop-up-content > * {
  display: block;
 }
 .pop-up-content p {
  position: relative;
  margin: -3rem 0 2rem 1rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.8);
 }
}