@font-face {
  font-family: productSans;
  src: url("/fonts/productSans.woff2");
}

* {
  font-family: productSans;
}

body {
  margin: 0 0 0 0;
  text-align: left;
}

.title {
  background-color: #293669;
  color: white;
  padding: 0.5rem 2rem 0.5rem 2rem;
}

.title .heading {
  font-size: 200%;
  margin-bottom: 0;
}

.title .currentPath {
  padding: 0 0 0 1rem;
}

.files {
  max-width: 50rem;
  width: 90%;
  margin: 2rem auto 2rem auto;
}

.metaFolder {
  width: 100%;
  height: auto;
  margin: 0 auto 1rem auto;
  position: relative;
}

.metaFolder img {
  border-radius: 10px;
  width: 100%;
  height: 300px;
  object-fit: cover;
  filter: brightness(80%);
}

.metaFolder p {
  font-size: 1em;
  color: white;
  position: absolute;
  top: 80%;
  right: 10%;
}

.folder {
  margin-bottom: 1.2rem;
}

.file {
  margin-bottom: 1.2rem;
}

.folder a {
  color: blue;
  text-decoration: none;
}

.file a {
  text-decoration: none;
  color: black;
}

img {
  width: 15px;
  margin-right: 0.2rem;
}

.gradient {
  width: 15px;
  margin-right: 0.2rem;
  position: relative;
  z-index: -1;
  display: block;
  height: 200px;
  width: auto;
}

.gradientImage {
  display: inline-block;
  border-radius: 10px;
  background: -moz-linear-gradient(
    top,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.65) 100%
  ); /* FF3.6+ */
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0%, rgba(0, 0, 0, 0.65)),
    color-stop(100%, rgba(0, 0, 0, 0))
  ); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(
    top,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.65) 100%
  ); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(
    top,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.65) 100%
  ); /* Opera 11.10+ */
  background: -ms-linear-gradient(
    top,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.65) 100%
  ); /* IE10+ */
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.65) 100%
  ); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}

@media only screen and (min-width: 768px) {
  .files {
    max-width: none;
  }

  .metaFolderFiles {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }

  .metaFolder {
    margin: 0;
    width: 30%;
  }
}