@import url("global.css");

.kransen__wrapper {
  position: relative;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  width: 100%;
  border: 1px solid black;
  z-index: auto;
  max-width: 800px;
}

.kransen {
  display: flex;
  flex-direction: column;
}

/* KRANSEN INTRO */

.kransen_intro {
  display: flex;
  flex-direction: row;
}

.kransen_intro-text {
  display: flex;
  flex-direction: column;
}

.kransen_intro-text h3 {
  margin: 0.7rem 0 0 0;
}

.kransen img {
  width: auto;
  max-width: 50vw;
  height: auto;
  margin: 0.7rem;
}

.kransen_imgs {
  display: grid;
  max-width: 94%;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-gap: 0.7rem;
}

hr {
  border: 0.5px solid black;
  margin: 0;
}

/* POPUP */

.checkbtn-kransen a {
  cursor: pointer;
}

.checkbtn-kransen a:hover {
  color: black;
  text-decoration: underline;
}

.kransen_popup {
  display: none;
}

#check-kransen:checked ~ .kransen_popup {
  display: block;
}

#check-kransen {
  display: none;
}

.kransen_popup p {
  font-family: "Junction";
  margin: 0.7rem;
  max-width: 500px;
}

.more-arrow {
  font-weight: bold;
  text-decoration: underline;
}

@media screen and (min-width: 800px) {
  .kransen img {
    max-width: 300px;
  }
}