style.css

/* PAGE DEFAULTS */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* REM sizing */
html {
  /* 10px */
  font-size: 62.5%;
}

body {
  /* 16px */
  font-size: 1.6rem;
}




/* PAGE STYLES */

main {
  width: 100%;
  max-width: 120rem;
  margin: 0 auto;
}

#intro {
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 3rem;
  padding-bottom: 6rem;
}

h1.title {
  font-family: 'Montserrat', sans-serif;
  font-size: 6rem;
  font-weight: 700;
  color: #191919;
}

.subtitle {
  color: #7f7f7f;
  font-size: 2.2rem;
  font-weight: 600;
  margin-bottom: 3rem;
}

p,
div,
a {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  color: #191919;
}

p {
  line-height: 1.5;
}

.intro-text {
  max-width: 90rem;
}

.links {
  margin-top: 3rem;
  display: flex;
  align-items: center;
}

.links a {
  text-decoration: none;
  cursor: pointer;
}

.links a:not(:last-of-type) {
  margin-right: 1.6rem;
}

.links i {
  font-size: 3.5rem;
  transition: all 500ms;
  color: #ccc;
}

.links a:hover i {
  color: #191919;
}

.btn-link {
  background: #191919;
  color: white;
  padding: 1rem 2rem;
  font-weight: 600;
  transition: all 500ms;
}

.btn-link:hover {
  background: #7f7f7f;
  padding: 1rem 2rem;
}

hr {
  border: 0;
  height: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  margin: 6rem 0;
}

h2.section-heading {
  font-family: 'Montserrat', sans-serif;
  font-size: 3rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 2rem;
}

#contact .links {
  margin-top: 0;
  margin-bottom: 6rem;
}




/* GRID */

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-column-gap: 3rem;
  grid-row-gap: 3rem;
}

.width-1 {
  grid-column: span 1;
}

.width-2 {
  grid-column: span 2;
}

.width-3 {
  grid-column: span 3;
}

.width-4 {
  grid-column: span 4;
}

.width-5 {
  grid-column: span 5;
}

.width-6 {
  grid-column: span 6;
}

.width-7 {
  grid-column: span 7;
}

.width-8 {
  grid-column: span 8;
}

.width-9 {
  grid-column: span 9;
}

.width-10 {
  grid-column: span 10;
}

.width-11 {
  grid-column: span 11;
}

.width-12 {
  grid-column: span 12;
}




/* BOXES */

.outerBox {
  display: block;
  background: #191919;
  width: 100%;
  height: 80vh;
  max-height: 50rem;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  padding: 3rem;
  text-decoration: none;
}

.innerBox {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  justify-content: flex-end;
}

.innerBox .boxTitle {
  color: white;
  font-size: 2.5rem;
}

.innerBox .boxDesc {
  transition: 400ms ease;
  color: white;
}

.overlayBox {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}

.overlayBox img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  object-position: left top;
}

.overlayBox .gradient {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-image: linear-gradient(180deg, rgba(25, 25, 25, 0.3) 0%, rgba(25, 25, 25, 0.6) 60%, rgba(25, 25, 25, 1) 100%);
}

.overlayBox .fill {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: #191919;
  transition: opacity 400ms ease;
  opacity: 0;
}

.iconBox {
  position: absolute;
  top: 4rem;
  right: 4rem;
}

.iconBox i {
  color: #ccc;
  font-size: 3.6rem;
  margin-left: 1.2rem;
}

/* On desktop, use javascript to set exact heights and animate cover */

@media (hover: hover) and (pointer: fine) {
  body.js .innerBox {
    display: block;
    position: relative;
    height: 100%;
    transition: 400ms ease;
    transform: translateY(calc(100% - var(--titleHeight)));
  }

  body.js .innerBox .boxDesc {
    opacity: 0;
  }

  body.js .overlayBox .fill {
    opacity: 1;
  }

  body.js .outerBox:hover .innerBox {
    transform: translateY(calc(100% - var(--titleHeight) - var(--descHeight)));
  }

  body.js .outerBox:hover .boxDesc {
    opacity: 1;
  }

  body.js .outerBox:hover .overlayBox .fill {
    transition: opacity 800ms ease;
    opacity: 0;
  }
}


/* MEDIA QUERIES */

@media screen and (max-width: 1400px) {
  main {
    width: 90%;
  }
}

@media screen and (max-width: 1200px) {
  .grid {
    grid-column-gap: 1.5rem;
    grid-row-gap: 1.5rem;
  }

  .grid-item {
    grid-column: span 6;
  }
}

@media screen and (max-width: 800px) {
  .grid-item {
    grid-column: span 12;
  }

  h1.title {
    font-size: 5rem;
  }

  .subtitle {
    font-size: 2rem;
  }

  /* No animations */
  .wow {
    /*CSS transitions*/
    -o-transition-property: none !important;
    -moz-transition-property: none !important;
    -ms-transition-property: none !important;
    -webkit-transition-property: none !important;
    transition-property: none !important;
    /*CSS transforms*/
    -o-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
    -webkit-transform: none !important;
    transform: none !important;
    /*CSS animations*/
    -webkit-animation: none !important;
    -moz-animation: none !important;
    -o-animation: none !important;
    -ms-animation: none !important;
    animation: none !important;
  }
}

@media screen and (max-width: 400px) {
  h1.title {
    font-size: 4rem;
  }

  .subtitle {
    font-size: 1.8rem;
  }
}

/* Fix items from showing on initial load */
.wow {
  visibility: hidden;
}