/* BēnreaDesignStudio */

/* Header */
header {
   opacity: 0;
   transform: translate(0, -100%);
   transition: all var(--time-lazy) ease-out;
}
header.visible {
   opacity: 1;
   transform: translate(0, 0);
}
#header-home, #header-catalogue, #header-about, #header-team, #menu-toggle {
   display: none !important;
}

/* Main */
main {
   padding: var(--height-header) 0 0 0;
   color: var(--color-text-primary);
   gap: var(--spacer-xxl);
   opacity: 0;
   transform: translate(0, var(--spacer-xl));
   transition: all var(--time-very-slow) var(--cubic-bezier-ease-in-out-quart);
}
main.visible {
   opacity: 1;
   transform: translate(0, 0);
}

#hero {
   display: flex;
   position: relative;
   height: fit-content;
}
#hero img {
   display: flex;
   position: relative;
   width: fit-content;
   object-fit: contain;
   margin: auto;
}
#hero h1 {
   display: flex;
   position: relative;
   margin: 0 auto;
   color: var(--color-text-primary);
}

#details {
   display: flex;
   position: relative;
   flex-direction: column;
   margin: 0;
   left: 0;
   right: 0;
   height: fit-content;
}
#details div {
   display: grid;
   position: relative;
   margin: 0;
   left: 0;
   right: 0;
   height: fit-content;
   padding: var(--margin-body) var(--spacer-xxxl);
   grid-template-columns: 1fr 1fr;
   grid-auto-rows: auto;
   gap: var(--margin-body);
   border-top: var(--border-normal) solid rgba(0, 0, 0, 0.25);
}
#details div h3 {
   width: 100%;
}
#details div ul {
   width: 100%;
}

/* Footer */
footer {
   display: none;
   opacity: 0;
   transform: translate(0, var(--spacer-xl));
   transition: all var(--time-very-slow) var(--cubic-bezier-ease-in-out-quart);
}
footer.visible {
   opacity: 1;
   transform: translate(0, 0);
}


/* Page Transition */
#page-transition {
   background: var(--color-background-primary-inverse);
}


/* Responsiveness */
@media screen and (max-width: 912px) {}

@media screen and (max-width: 768px) {
   #details div {
      padding: var(--spacer-xl) var(--margin-body) ;
      grid-template-columns: 1fr;
      gap: var(--spacer-lg);
   }
}