#content {
  padding: 0 !important;

  #cover {
    width: 100%;
    aspect-ratio: 4/1;

    background-size: cover;
    background-position: center;
    background-image: linear-gradient(#00000000, var(--background)), url("https://cdn.rileydeman.com/portfolio/img/cover-projects.png");

    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: .75% 1%;

    @media screen and (max-width: 767px) {
      aspect-ratio: 2/1;
    }
  }

  #top {
    display: flex;

    #left {
      width: 75%;

      #titleDiv {
        padding: 2.5% 2% .5%;

        @media screen and (max-width: 767px) {
          padding: 5% 4%;
        }

        P {
          font-family: oswald;
          font-size: 1.25rem;

          @media screen and (max-width: 767px) {
            font-size: 1rem;
          }

          &:before {
            content: "///";
            margin-right: .5%;
            color: var(--subParagraph);
            font-family: maroco;
            font-size: 1.2rem;

            @media screen and (max-width: 767px) {
              margin-right: 1.5%;
            }
          }
        }
      }
    }

    #right {
      width: 25%;
      padding: 2%;
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }
  }

  #projectItems {
    width: 100%;
    padding: 1%;
    display: grid;
    justify-content: center;
    grid-template-columns: 19% 19% 19% 19% 19%;
    column-gap: 1%;
    row-gap: 1vh;

    @media screen and (max-width: 1200px) {
      grid-template-columns: 32% 32% 32%;
    }

    @media screen and (max-width: 767px) {
      grid-template-columns: 49% 49%;
      column-gap: 2%;
    }

    @media screen and (max-width: 480px) {
      grid-template-columns: 100%;
      column-gap: 0;
      row-gap: 2vh;
      padding: 3%;
    }

    .projectItem {
      width: 100%;
      aspect-ratio: 1/1;
      position: relative;
      overflow: hidden;

      img {
        position: absolute;
        width: 100%;
        aspect-ratio: 1/1;
        top: 0;
        left: 0;
        object-fit: cover;
        object-position: center;
        transition: .5s ease;
      }

      .itemContent {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--background-transparent);
        padding: 4%;

        display: flex;
        flex-direction: column;
        justify-content: space-between;

        h2 {
          width: fit-content;
          font-size: 1.65rem;

          @media screen and (max-width: 767px) {
            font-size: 1.5rem;
          }
        }

        .bottom {
          display: flex;

          .left {
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: flex-start;

            .date {
              margin-right: 3%;
              opacity: 0.75;
            }

            .type {
              font-weight: bold;
            }
          }

          .right {
            aspect-ratio: 1/1;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 22%;
            position: relative;

            @media screen and (max-width: 767px) {
              width: 18%;
            }

            .diamond {
              aspect-ratio: 1/1;
              width: 75%;
              display: flex;
              justify-content: center;
              align-items: center;
              border: 2px solid var(--primary);
              border-radius: 10px;
              transform: rotate(45deg);
            }

            .arrow {
              aspect-ratio: 1/1;
              width: 80%;
              position: absolute;
              top: 50%;
              right: 50%;
              transform: translate(30%, -50%);
              transition: .5s ease;
            }

            .arrowLine {
              position: absolute;
              top: 50%;
              right: 50%;
              transform: translate(50%, -50%);
              background-color: var(--lines);
              height: 6%;
              width: 50%;
              border-radius: 5px;
              transition: .5s ease;
            }
          }
        }
      }

      &:hover {
        img {
          scale: 1.25;
        }

        .itemContent {
          h2 {
            /*&:after {*/
            /*  width: 100%;*/
            /*}*/
          }

          .bottom {
            .right {
              .diamond {
                background-color: var(--primary);
              }

              .arrow {
                scale: 1;
                transform: translate(15%, -50%);
              }

              .arrowLine {
                width: 0;
                opacity: 0;
              }
            }
          }
        }
      }
    }
  }
}