/* If footer has a lot of content => add breakpoint */
.main { 
  /* make sure to cover the screen */
  min-height: 100vh;

  /* need a solid bg to hide the footer */
  background: var(--primary);

  /* border bottom radius */
  /* border-bottom-left-radius: 1.5em;
  border-bottom-right-radius: 1.5em; */

  /* put on top */
  position: relative;
  z-index: 1;
}

/* Sticky footer */
#brx-footer {
  position: sticky;
  bottom: 0;
  left: 0;
  z-index: 0;
}

/* Scrolling sections */
.scrolling-sections {
    /* padding: 0; */
    padding-left: 0;
    padding-right: 0;
    position: relative;
    overflow: hidden;
}
.scrolling-sections__slide {
    height: 100vh;
    /* box-shadow: 3px 3px 30px rgba(0, 0, 0, 0.14); */
}
.scrolling-sections__content-wrapper {
    width: 100%;
    height: 100%;
    perspective: 250vw;
}
.scrolling-sections__content {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d; /* inherits the perspective from the parent */
    transform-origin: 50% 10%;
    /* padding: 25px 50px 50px 25px; */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.scrolling-sections__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/* .scrolling-sections__bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
} */

.scrolling-sections__bottom img {
    width: 25vw;
}
.scrolling-sections__slide:nth-child(1) .scrolling-sections__content, 
.scrolling-sections__slide:nth-child(4) .scrolling-sections__content {
    background: #F1F1F1;
    color: #121212;
}
.scrolling-sections__slide:nth-child(2) .scrolling-sections__content,
.scrolling-sections__slide:nth-child(5) .scrolling-sections__content {
    background: #C4EF7A;
    color: #527200;
}
.scrolling-sections__slide:nth-child(3) .scrolling-sections__content {
    background: #FC4C3B;
    color: #FFF;
}

