@import url(/style/all.css);
@import url(/style/lightbox.css);

body.no-scroll {
  overflow: hidden;
}

header {
  height: calc(40vh + var(--nav-height));
  top: -40vh;

  /* layout */
  .heroheader {
    height: 40vh;
  }
}

main {
  margin-top: 5vh;

  article.gallery {
    width: var(--bodywidth);
    max-width: var(--bodymaxwidth);

    section.gallery-start,
    section.gallery-overview {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1em;

      a.addParamsButton {
        min-height: 100px;
        aspect-ratio: 1 / 1;
        background-position: center;
        background-size: cover;
        border-radius: 1em;
        transition: transform 250ms;
        display: grid;
        align-items: end;
        overflow: hidden;
        transform: scale(1);
        border: 2px solid var(--color-border);

        div {
          background-color: var(--color-portfolioh2-bg);
          display: flex;
          justify-content: center;
          z-index: 2;

          h2 {
            margin: 0.5em auto;
          }
        }
        img {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          cursor: pointer;
          object-fit: cover;
        }
      }
      a.addParamsButton:hover {
        transform: scale(1.03);
        cursor: pointer;
      }
    }

    section.gallery-container {
      display: grid;
      grid-gap: 10px;
      grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
      grid-auto-rows: 250px;

      a.lightbox_img_wrap {
        display: block;
        height: 100%;
        width: 100%;

        img {
          object-fit: cover;
          object-position: center;
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}

main.desktop {
  article.gallery {
    section.gallery-start {
      grid-template-columns: 1fr 1fr 1fr;
    }
    section.gallery-overview {
      grid-template-columns: 1fr 1fr;

      a.addParamsButton {
        aspect-ratio: 3/2;
      }
    }
    section.gallery-container {
      grid-auto-rows: 200px;

      a.lightbox_img_wrap:nth-child(3n + 2) {
        grid-row-end: span 2;
      }

      a.lightbox_img_wrap:nth-child(5n + 6) {
        grid-row-end: span 3;
      }
    }
  }
}