@import url(/style/all.css);
@import url(/style/cookies.css);
@import url(/style/fontawesome/css/all.min.css);
@import url(/style/fonts.css);
@import url(/style/headerstyle.css);
@import url(/style/navstyle.css);
@import url(/style/footerstyle.css);

/* Portfolio */

main article.portfolio {
  width: var(--body-width);
  max-width: var(--body-max-width);
  margin: 5vh auto;
}

main article.portfolio section {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1em;

}

main article.portfolio section div.addParamsButton {
  transition: transform 250ms;
  border-radius: 0.5em;
  min-height: 100px;
  aspect-ratio: 1 / 1;
cursor: pointer;
}

main article.portfolio section div.addParamsButton:hover {
  transform: scale(1.03);
}

main article.portfolio section div.addParamsButton {
  border-radius: 0.5em;
  background-position: center;
  background-size: cover;

  box-shadow: 1em 1em 2em var(--color-davysgrey);
    display: grid;
align-items:end;
}

main article.portfolio section div.streetart {
  background-image: url(/img/portfolio-img-streetart.jpg);
}

main article.portfolio section div.landscape {
  background-image: url(/img/portfolio-img-landscape.jpg);
}

main article.portfolio section div.concerts {
  background-image: url(/img/portfolio-img-concerts.jpg);
}

main article.portfolio section div.addParamsButton div {
  background-color: var(--color-black);
  border-radius: 0 0 1em 1em;
  display: flex;
  justify-content: center;
}

@media (min-width: 768px) {
  main article.portfolio section {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

/* Separation */

main article.separation {
  height: 50vh;
  width: 100%;
  background-position: center;
  background-size: cover;
}

@supports not (-webkit-touch-callout: none) {
  .separation {
    background-attachment: fixed;
  }
}

main article.sep-img1 {
  background-image: url(/img/sep-img-1.jpg);
}

main article.sep-img2 {
  background-image: url(/img/sep-img-2.jpg);
}

main article.sep-img3 {
  background-image: url(/img/sep-img-3.jpg);
}

main article.sep-img4 {
  background-image: url(/img/sep-img-4.jpg);
}

/* Content */

main article.content {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: minmax(40vh, auto);
  grid-gap: 20px;
  padding: 20px;
}

main article.content section div.content-img {
  background-position: center;
  background-size: cover;
  border-radius: 0.5em;
  width: 100%;
  height: 100%;

  box-shadow: 1em 1em 2em var(--color-davysgrey);
}

main article.content section div.about-img {
  background-image: url(/img/me.jpg);
}

main article.content section div.disclaimer-img {
  background-image: url(/img/dec.jpg);
}

main article.content section div.contact-img {
  background-image: url(/img/contact.jpg);
}

@media (min-width: 768px) {
  main article.content {
    grid-template-columns: 1fr 1fr;
  }
}