html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,button,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-family:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}*{box-sizing:border-box}

@font-face {
  font-family: "MG";
  src: url("mg-light.otf") format("opentype");
  font-weight: 100;
  font-display: fallback
}

@font-face {
  font-family: "MG";
  src: url("mg-regular.otf") format("opentype");
  font-weight: 400;
  font-display: fallback
}

@font-face {
  font-family: "MG";
  src: url("mg-medium.otf") format("opentype");
  font-weight: 500;
  font-display: fallback
}

@font-face {
  font-family: "MG";
  src: url("mg-bold.otf") format("opentype");
  font-weight: 700;
  font-display: fallback
}

/* @font-face {
  font-family: "MG";
  src: url("mg-regular.woff2") format("woff2"),url("mg-regular.woff") format("woff");
  font-weight: 400;
  font-display: fallback
}

@font-face {
  font-family: "MG";
  src: url("mg-regular-italic.woff2") format("woff2"),url("mg-regular-italic.woff") format("woff");
  font-style: italic;
  font-weight: 400;
  font-display: fallback
}

@font-face {
  font-family: "MG";
  src: url("mg-light.woff2") format("woff2"),url("mg-light.woff") format("woff");
  font-weight: 300;
  font-display: fallback
}

@font-face {
  font-family: "MG";
  src: url("mg-light-italic.woff2") format("woff2"),url("mg-light-italic.woff") format("woff");
  font-style: italic;
  font-weight: 300;
  font-display: fallback
}

@font-face {
  font-family: "MG";
  src: url("mg-bold.woff2") format("woff2"),url("mg-bold.woff") format("woff");
  font-style: bold;
  font-weight: 700;
  font-display: fallback
}

@font-face {
  font-family: "MG";
  src: url("mg-bold-italic.woff2") format("woff2"),url("mg-bold-italic.woff") format("woff");
  font-style: italic;
  font-weight: 700;
  font-display: fallback
} */

body {
  /* background: #21252c;
  color: #fff; */
  color: hsl(224deg 14% 27%);
  font: 400 calc(13px + .275vw)/1.6 'MG', Times, sans-serif;
  padding-bottom: 100px;
  padding-top: 100px;
}

a {
  color: hsl(166deg 61% 37%);
}

img {
  height: auto;
  max-width: 100%;
}

.wrap {
  margin-left: auto;
  margin-right: auto;
  max-width: 1140px;
}

.text--lg {
  font-size: calc(1.2rem + .2vw);
  line-height: 1.6;
  max-width: 60ch;
  margin: 0 auto;
}

.page__content p {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

h1 {
  font-size: 3.5rem;
  font-weight: bold;
  /* letter-spacing: -2px; */
  -webkit-text-stroke: .04em;
}

h2 {
  /* font-family: 'Shadows Into Light Two', cursive; */
  font-size: 2rem;
  font-weight: 800;
  /* margin-top: 2em; */
  -webkit-text-stroke: .025em;
}

button, .btn {
  background: hsl(166deg 61% 37%);
  border: 0;
  border-radius: .2rem;
  color: #fff;
  cursor: pointer;
  font-size: 1.2rem;
  font-weight: 500;
  padding: 1rem;
  text-decoration: none;
  transition: .4s;
}

  button svg, .btn svg {
    stroke: currentColor;
    height: 1.3em;
    margin-left: .6rem;
    width: 1.3em;
    vertical-align: text-top;
  }

button:hover {
  background: hsl(166deg 61% 27%);
}

p {
  color: hsl(223.63deg 13.95% 44.77%);
}

.pretitle {
  color: #666;
  font-weight: 500;
  font-size: 1rem;
  margin-bottom: -1rem;
}

  .subtitle a {
    font-weight: 500;
  }

.portfolio {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 1rem;
  margin-top: 2rem;
}

.portfolio__item {
  /* border-radius: .25rem; */
  overflow: hidden;
  position: relative;
}

.portfolio__item--large {
  grid-column: span 2;
}

  .portfolio__item > div {
    background-color: rgba(235, 238, 239, .9);
    padding: 1rem;
    position: absolute;
    right: 0; bottom: 0; left: 0;
    z-index: 2;
  }

  .portfolio__item img {
    aspect-ratio: 1 / 1;
    display: block;
    object-fit: cover;
    width: 100%;
  }

  .portfolio__item--large img {
    aspect-ratio: 2 / 1;
    object-fit: cover;
  }

  .portfolio__item h3 {
    font-size: 1.1rem;
    font-weight: 700;
    -webkit-text-stroke: .03em;
  }

  .portfolio__item p {
    color: #666;
    font-size: .9rem;
  }

  .portfolio__item img {
    filter: saturate(.75);
    opacity: .9;
    transition: 1s;
  }

  .portfolio__item:hover img {
    filter: saturate(1);
    opacity: 1;
    transform: scale(1.2);
    transform-origin: top left;
  }

/* .portfolio__item {
  background: #ccc;
  aspect-ratio: 6 / 7;
  flex: 0 0 33.33%;
  margin-top: 2rem;
  min-height: 30vh;
  overflow: hidden;
  padding: 2rem;
  position: relative;
}

.portfolio__item > div {
  position: relative;
  top: 40%;
  transform: translateY(-40%);
}

.portfolio__item h3 {
  font-size: 2rem;
  font-weight: 800;
  margin: 0;
}

.portfolio__item p {
  margin: 0;
}

.portfolio__item img {
  object-fit: cover;
  position: absolute;
  top: 0;
  bottom: 0;
  height: 100%;
  left: 20%;
  opacity: .4;
  z-index: -1;
  transition: 1s;
} */

.case-study {
  display: flex;
}

  .case-study__main {
    flex: 0 0 60%;
  }

  .case-study__side {
    flex: 0 0 40%;
    padding-left: 3rem;
  }

    .case-study__side img {
      box-shadow: .2rem .2rem 10px rgba(0, 0, 0, .1);
      display: block;
      margin-bottom: 2rem;
    }

  .case-study p ~ p {
    margin-top: 1rem;
  }