pauc/zantop

.front {
  #brand, #main_menu {
    div a {
      font-size: 4em;
      //@include transition(color 0.25s ease-in-out);

      &:hover {
        color: #ac4a19;
        //@include transition(color 0.25s ease-in-out);
      }
    }

    i {
      font-size: 2.5em;
      font-style: normal;
    }
  }

  #main {
    margin-top: 2.5rem;
  }

  #works {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;

    .work {
      position: relative;
      background: black;

      a.work-preview {
        width: 100%;
        padding: 50% 0;
        display: block;
        box-shadow: 0 0 6px 1px rgba(77,28,34,.61);

        img {
          width: 100%;
          position: absolute;
          top: 0;
        }
      }
    }

    .work:hover a.work-preview {
      box-shadow: 0 0 8px 2px rgba(77,28,34,.80);
    }
  }

  .work-title {
    width: calc(100% + 1.5rem);
    position: absolute;
    bottom: -6px;
    left: -0.75rem;
    border-width: 0.5em;
    border-style: solid;
    -moz-border-image: asset-url('torn_edges_border.png') 10 10 repeat;
    -webkit-border-image: asset-url('torn_edges_border.png') 10 10 repeat;
    -o-border-image: asset-url('torn_edges_border.png') 10 10 repeat;
    border-image: asset-url('torn_edges_border.png') 10 10 repeat;
    text-align: center;
    font-size: 1.625rem;

    a {
      display: block;
      position: relative;
      background: asset-url('paper.png') 50% 50%;
    }
  }
}

#pagination {
  margin-top: 3rem;
  text-align: center;
  font-size: 1.875rem;

  .pagination {
    span, em, a {
      min-width: 1rem;
      padding: .2rem;
      border: 1px solid $clear_grey;
      text-decoration: none;
    }

    .gap {
      border: none;
    }
  }
}

/* Per a efecte de fadeIn si està activat el javascript */
html.js .new-work {
  visibility: hidden;
}