.showcase h1 {
  margin: 8px;
  text-align: center;
}

.projectGroup {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 8px;
}

.projectCard {
  background-color: #24292E;
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
}

.projectCardHeader
{
  display: flex;
  justify-content: space-between;
  gap: 4px;
}

.projectCardHeaderTextContainer
{
  order: 0;
  align-content: center;
}

.projectCardHeaderSubtitle
{
  margin: 0;
  color: #aaaaaa
}

.toolsWrapper
{
  order: 1;
}

.description {
  flex-grow: 1;
  white-space: pre-line;
}

.mediaWrapper {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  margin-bottom: 8px;
}

.mediaWrapper video,
.mediaWrapper img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
}

@media screen and (max-width: 480px)
{
  .showcase h1
  {
    font-size: 2rem;
  }
}