/* Page Layout */

body {
  background-color: white;
  min-height: 100vh;
  display: flex;
  justify-content: center;
}

section#portfolio {
  width: 100%;
  max-width: 760px;
  line-height: 1.4em;
  padding: 0 .5em;
}

header {
  border-bottom: 2px solid black;
}

nav .nav-item {
  margin: 0 .5em;
}

.portfolio-items {
  margin: 1em 0;
}

/* Portfolio Item Component */

.portfolio-item {
  display: grid;
  grid-template-columns: repeat(2, auto);
  grid-template-rows: repeat(4, auto);
  margin: 1em 0;
  gap: .5em;
}

.portfolio-item * {
  font-family: Bitter, serif;
}

.portfolio-item-heading {
  display: flex;
  justify-content: center;
  grid-column: 1 / 3;
  grid-row: 1 / 2;
  margin: 0;
  text-align: center;
  position: relative
}

.portfolio-item h1 div {
  z-index: 1;
  position: relative;
}

.portfolio-item span.stripe {
  position: absolute;
  top: 15%;
  bottom: 15%;
  left: 0;
  width: 0;
  transform: translate(.5em, .25em);
  transition: width .45s ease-in;
}

.portfolio-item:hover span.stripe {
  width: 100%;
  transition: width .95s ease;
}

.portfolio-item-subheading {
  grid-column: 1 / 3;
  grid-row: 2 / 2;
  margin: 0;
  font-size: 1em;
  font-style: italic;
  font-weight: normal;
  width: 63%;
  justify-self: center;
  text-align: center;
}

@media screen and (max-width: 610px) {
  .portfolio-item-subheading {
    width: 85%;
  }
}

.portfolio-item-preview {
  grid-column: 1 / 1;
  grid-row: 3 / 4;
  place-self: center;
}

@media screen and (max-width: 610px) {
  .portfolio-item-preview {
    grid-column: 1 / 3;
    grid-row: 3 / 3;
  }
}

.portfolio-item-preview img {
  border: 2px solid black;
  border-radius: 4px;
}

.portfolio-item-summary {
  grid-column: 2 / 3;
  grid-row: 3 / 4;
  margin: 0;
  align-self: center;
}

@media screen and (max-width: 610px) {
  .portfolio-item-summary {
    grid-column: 1 / 3;
    grid-row: 4 / 4;
  }
}

/* Utility Classes */

.bg-color-green {
  background-color: rgba(84, 172, 72, .25);
}

.bg-color-pink {
  background-color: rgba(233, 68, 116, .25);
}

.bg-color-orange {
  background-color: rgba(222, 155, 97, .25);
}

.bg-color-blue {
  background-color: rgba(36, 150, 237, .25);
}

.bg-color-yellow {
  background-color: rgba(221, 184, 74, .25);
}

.bg-color-emerald {
  background-color: rgba(86, 192, 167, .25);
}

.bg-color-purple {
  background-color: rgba(160, 32, 240, .25);
}