@import "common.css";
@import "block.css";
@import "button.css";
@import "circle.css";
@import "container.css";
@import "margin.css";
@import "navbar.css";
@import "outline.css";
@import "padding.css";
@import "paragraph.css";
@import "row.css";
@import "space.css";
@import "spin.css";

/* Header */
#header {
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}
#header img.background {
  object-fit: cover;
}
#header img.logo_moments {
  margin-top: 40px;
  margin-left: auto;
  margin-right: auto;
  max-width: 250px;
  display: block;
}
#header .logo {
  width: 100%;
  display: block;
  padding: 40px;
  max-width: 500px;
  margin: 0 auto;
}
#header .overlay {
  z-index: 1;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgb(91 125 99 / 75%);
}

/* Showcase */
#showcase .row {
  align-items: center;
}
#showcase img.image {
  width: 350px;
  height: 350px;
  object-fit: cover;
  border-radius: 100%;
}
#showcase .feature.center {
  text-align: center;
}
#showcase .feature:nth-child(even) {
  background-color: rgb(213 223 167);
}
#showcase .feature:nth-child(even) .col:nth-child(1) {
  order: 1;
}
#showcase .feature:nth-child(even) .row > * + * {
  margin-right: 80px;
}
#showcase .feature:nth-child(odd) .row > * + * {
  margin-left: 80px;
}

/* Responsiveness | Breakpoints: 640px, 768px, 1024px, 1280px, 1536px */
@media screen and (max-height: 1024px) {
  #header .logo {
    max-width: 400px;
  }
}
@media screen and (max-height: 768px) {
  #header .logo {
    max-width: 300px;
    padding: 20px 40px;
  }
}
@media screen and (max-width: 1024px) {
  /* Header */
  #showcase .col {
    width: 100%;
    margin: 0 !important;
    text-align: center;
  }
  #showcase .col-image {
    margin-bottom: 40px;
  }
  #showcase .paragraph > * {
    text-align: center;
  }
  #showcase .feature:nth-child(odd) .col:nth-child(2) {
    margin-top: 40px !important;
  }
  #showcase .socials {
    justify-content: center;
  }
  #showcase .feature:nth-child(even) .col:nth-child(2) {
    order: 1;
    margin-top: 40px !important;
  }
  #showcase .outline {
    padding: 35px;
  }
}
@media screen and (max-width: 768px) {
  /* Showcase */
  #showcase img.image {
    width: 250px;
    height: 250px;
  }
  #header {
    height: 75vh;
  }
  #showcase .outline {
    padding: 25px;
  }
}
@media screen and (max-width: 640px) {
  /* Showcase */
  #showcase img.image {
    width: 200px;
    height: 200px;
  }
}

.contact {
  text-align: center;
  margin: 0 auto;
  background-color: rgb(223 228 183);
}