/*----------------------------------------------*\
    PAGES
	=====

	@package mfa.design.calarts

\*----------------------------------------------*/
/*----------------------------------------------*\
    COMPONENTS
	==========

	@package mfa.design.calarts

\*----------------------------------------------*/
/* 
 *
 * / Variables
------------------------------------------------*/
/* Colors */
/* Breakpoints */
/* Fonts */
/* 
 *
 * ANCHOR Student Work
------------------------------------------------*/
.life {
  margin: 0 1em;
}
@media screen and (min-width: 48rem) {
  .life {
    margin: 0 2em;
  }
}
.life__wrapper {
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 1em;
  max-width: var(--max-width);
}
@media screen and (min-width: 48rem) {
  .life__wrapper {
    grid-template-columns: repeat(12, 1fr);
  }
}
.life__section {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1/-1;
  margin-top: 1em;
  font-family: "Marfa";
}
.life__section:first-child {
  margin-top: 6em;
}
.life__section__title {
  grid-column: 1/-1;
  font-weight: 500;
  font-size: var(--size-300);
  letter-spacing: -0.02em;
  color: var(--pink-text);
  padding-top: 0.2em;
  margin-bottom: 0.3em;
}
@media screen and (min-width: 36rem) {
  .life__section__title {
    grid-column: 2/-1;
  }
}
@media screen and (min-width: 48rem) {
  .life__section__title {
    grid-column: 3/-1;
    font-size: var(--size-400);
  }
}
.life__section .border {
  grid-column: 2/-1;
  border-top: 0.15em solid var(--green);
  margin-top: 0.2em;
  margin-right: -1em;
}
@media screen and (min-width: 36rem) {
  .life__section .border {
    grid-column: 3/-1;
  }
}
@media screen and (min-width: 48rem) {
  .life__section .border {
    grid-column: 5/-1;
    margin-right: -2em;
  }
}
.life__section__text {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: subgrid;
  color: var(--green);
  margin-bottom: 1em;
  line-height: 130%;
}
@media screen and (min-width: 36rem) {
  .life__section__text {
    grid-column: 2/-1;
  }
}
@media screen and (min-width: 48rem) {
  .life__section__text {
    grid-column: 3/11;
    font-size: var(--size-100);
  }
}
.life__section__text p:first-child {
  grid-column: 2/-1;
  padding-top: 0.4em;
  padding-right: 1rem;
  margin-top: 0.2em;
  margin-right: -1rem;
}
@media screen and (min-width: 48rem) {
  .life__section__text p:first-child {
    grid-column: 3/-1;
    font-size: var(--size-100);
  }
}
.life__section__text p {
  grid-column: 1/-1;
}
.life__section__text.middle {
  margin-top: 1em;
}
@media screen and (min-width: 48rem) {
  .life__section__image {
    display: grid;
    grid-template-columns: subgrid;
    -webkit-box-align: end;
            align-items: end;
  }
}
.life__section__image + .life__section__image {
  margin-top: 0.8em;
}
.life h2 {
  grid-column: 1/-1;
  font-weight: 600;
  font-size: var(--size-200);
  color: var(--pink-text);
  margin-bottom: 0.2em;
}
@media screen and (min-width: 36rem) {
  .life h2 {
    grid-column: 1/2;
    font-size: var(--size-300);
  }
}
@media screen and (min-width: 48rem) {
  .life h2 {
    grid-column: 1/3;
    font-size: var(--size-300);
    text-align: right;
  }
}
.life img + img {
  margin-top: 0.6em;
}
@media screen and (min-width: 36rem) {
  .life img + img {
    margin-top: 1em;
  }
}
@media screen and (min-width: 48rem) {
  .life img + img {
    margin-top: 0;
  }
}
.life .caption {
  grid-column: 1/-1;
  max-width: 18em;
  font-size: var(--size-085);
  margin: 0.5em 0 0 auto;
}
@media screen and (min-width: 36rem) {
  .life .caption {
    max-width: 24em;
  }
}
@media screen and (min-width: 48rem) {
  .life .caption {
    font-size: var(--size-070);
    grid-column: span 2;
    margin: 0;
  }
}
@media screen and (min-width: 64rem) {
  .life .caption {
    font-size: var(--size-080);
  }
}