@import "reset.css";
@import "brand-head.css";
@import "nav-bar.css";
@import "hero.css";
@import "fonts.css";
@import "icons.css";
@import "utilities.css";
@import "cards.css";
@import "contact-prompt.css";
@import "brand-theme.css";
@import "related.css";
@import "projects.css";
@import "contact.css";

/* ------------- */
/* Up All */
/* ------------- */
body {
  display: flex;
  flex-direction: column;
  position: relative;
  background: #000;
  color: #fff;
}

.no-scroll  {
  overflow: hidden;
}

html {
  scroll-behavior: smooth;
}

footer,
section {
  background: #fff;
  color: #000;
}

section {
  padding: 30px 0;
}
.layout {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
}
.grid {
  display: grid;
}
.grid * {
  min-width: 0;
}

/*  */

/* Might remove */
/* img {
  image-rendering: pixelated;
} */
button {
  background-color: transparent;
  border: none;
}
.btn {
  display: inline-block;
  text-decoration: none;
  color: inherit;
  padding: 20px 10px;
  position: relative;
}
.btn:not(:first-of-type) {
  margin-left: 10px;
}
.btn__dark,
.btn__light {
  z-index: 10;
}
.btn__dark {
  color: #fff;
}
.btn__dark:hover {
  color: #000;
} 
.btn__dark:after,
.btn__light:after {
  content: "";
  width: 100%;
  height: 1px;
  left: 0;
  bottom: 0;
  position: absolute;
  z-index: -1;
  transition: height ease-in-out .1s;
}
.btn__dark:after {
  background-color: #fff;
}
.btn__dark:hover:after,
.btn__light:hover:after {
  content: "";
  width: 100%;
  height: 100%;
} 
.btn__light {
  color: #000;
}
.btn__light:hover {
  color: #fff;
  background-color: #f8f8f8;
}
.btn__light:after {
  background-color: #000;
}
.inline-links {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: all ease-in-out .1s;
}

.inline-links:hover {
  opacity: 1;
  border-bottom: 1px solid #000;
}
.links-list li:not(:last-of-type) {
  margin-bottom: 8px;
}

.meta {
  padding: 5px 10px;
  margin: 0 0 10px 0;
  display: inline-block;
  background-color: #f8f8f8;
  border-bottom: 1px solid #000;
}
.contact {
  background-color: #000;
  color: #fff;
}

.grid-sort li {
  display: inline-block;
}

.grid-sort li:not(:first-of-type) {
  margin-left: 10px;
}

.grid-sort :not(.selected) .btn__light:after {
  background-color: transparent;
}

.grid-sort :not(.selected):hover .btn__light:after {
  background-color: #000;
}

.grid-action {
  text-align: center;
}

/* ------------- */
/* Mobile Up */
/* ------------- */
@media (min-width: 576px) {
  .grid__cards-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ------------- */
/* Tablet Up */
/* ------------- */
@media (min-width: 768px) {
  section {
    padding: 40px 0;
  }
}

/* ------------- */
/* Laptop Up */
/* ------------- */
@media (min-width: 992px) {
  .btn {
    padding: 20px;
  }
  section {
    padding: 60px 0;
  }
  .layout {
    padding: 0 20px;
  }
  .grid__main {
    grid-template-columns: repeat(12, 1fr);
  }
  .grid-title,
  .grid-sort,
  .grid-content,
  .grid-action {
    grid-column: 1/13;
  }
  .grid-info {
    grid-column: 1/8;
  }
}

/* ------------- */
/* Desktop Up */
/* ------------- */
@media (min-width: 1200px) {
}