Fire & Safety Solutions

				
					<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --transition: cubic-bezier(0.1, 0.7, 0, 1);
}

body {
  background: linear-gradient(90deg, black, #333);
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40vh;
}

.imgs-parent {
  display: flex;
  gap: 0.4rem;
  perspective: 60rem;
}

.img {
  width: 8.0rem;
  height: 19rem;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  transition: transform 1.25s var(--transition), filter 3s var(--transition), width 0.3s var(--transition);
  position: relative;
  filter: grayscale(0) brightness(0.7);
  will-change: transform, filter;
  border-radius: 8px;
    /* Fixed z-index management */
  z-index: 1;
}

.content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 10px;
  color: white;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
}

h3 {
  font-size: 14px !important;
  margin-bottom: 5px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}



/* Button */
.btn {
  display: inline-block;
  font-family: "Montserrat", sans-serif;
  padding: 4px 10px;
  background-color: transparent;
  background-image: linear-gradient(140deg, #003087 42%, #005bb5 100%);
  color: white;
  text-decoration: none !important;
  font-size: 12px;
  font-weight: 600;
  border-radius: 15px;
  text-align: center;
  transition: background-color 0.3s ease, opacity 0.3s ease, visibility 0.3s ease, transform 0.2s ease;
  opacity: 0;
  visibility: hidden;
  margin-bottom: 8px;
  text-decoration: none !important;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}


.img:hover .btn,
.img:hover .content,
.img.open .btn,
.img.open .content {
  opacity: 1;
  visibility: visible;
}

/* Open state - Fixed z-index layering */
.img.open {
  width: 25vw;
  transform: translateZ(17.375rem);
  filter: grayscale(0) brightness(1);
  z-index: 100 !important; /* Highest priority */
  margin: 0 0.45vw;
}

/* When an image is open, manage other images' z-index properly */
.imgs-parent.has-open .img:not(.open) {
  z-index: 5; /* Lower than open image */
}

/* Adjacent images to open image get slightly higher z-index */
.img.open + .img,
.img:has(+ .img.open) {
  z-index: 10 !important;
}

.btn:hover {
  background-image: linear-gradient(140deg, #005bb5 0%, #0066cc 100%);
  color: #FFFFFF;
  text-shadow: 2px 2px 1px #000000;
  transform: translateY(-1px);
}


.img:hover {
  transform: translateZ(17.375rem);
  filter: grayscale(0) brightness(0.9);
}

.img:hover .content {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.img::before,
.img::after {
  content: "";
  position: absolute;
  width: 1.25rem;
  height: 100%;
  right: -1.25rem;
}

.img::after {
  left: -1.25rem;
}

.img:hover + * {
  transform: translateZ(14.77rem) rotateY(35deg);
  filter: grayscale(0.2) brightness(0.9);
  z-index: -1;
}

.img:hover + * + * {
  transform: translateZ(9.73rem) rotateY(40deg);
  filter: grayscale(0.4) brightness(0.8);
  z-index: -2;
}

.img:hover + * + * + * {
  transform: translateZ(4.17rem) rotateY(35deg);
  filter: grayscale(0.6) brightness(0.7);
  z-index: -3;
}

.img:hover + * + * + * + * {
  transform: translateZ(1.1rem) rotateY(25deg);
  filter: grayscale(0.8) brightness(0.6);
  z-index: -4;
}

.img:has(+ :hover) {
  transform: translateZ(14.77rem) rotateY(-35deg);
  filter: grayscale(0.2) brightness(0.9);
}

.img:has(+ * + :hover) {
  transform: translateZ(9.73rem) rotateY(-40deg);
  filter: grayscale(0.4) brightness(0.8);
}

.img:has(+ * + * + :hover) {
  transform: translateZ(4.17rem) rotateY(-35deg);
  filter: grayscale(0.6) brightness(0.7);
}

.img:has(+ * + * + * + :hover) {
  transform: translateZ(1.1rem) rotateY(-25deg);
  filter: grayscale(0.8) brightness(0.6);
}

.open {
  width: 25vw;
  transform: translateZ(17.375rem);
  filter: inherit;
  z-index: 1;
  margin: 0 0.45vw;
}

@media (max-width: 820px) {
  .img {
    width: 4.0rem;
    height: 19rem;
  }

  .img:hover {
    transform: translateZ(17.375rem);
    filter: inherit;
  }

  .open {
    width: 20vw;
    transform: translateZ(7.375rem);
    filter: inherit;
    z-index: 1;
    margin: 0 0.45vw;
  }

  /* Mindre tekst og knap på mindre skærme */
  h3 {
    font-size: 10px;
  }

  .btn {
    font-size: 8px;
    padding: 2px 5px;
    border-radius: 10px;
  }
}


</style>


<script>

    document.body.addEventListener("click", (event) => {
  const clickedElement = event.target,
    imgs = document.querySelectorAll(".img");

  if (!clickedElement.classList.contains("img")) {
    imgs.forEach((img) => img.classList.remove("open"));
    return;
  }

  if (clickedElement.classList.contains("open")) {
    clickedElement.classList.remove("open");
    return;
  }

  imgs.forEach((img) => img.classList.remove("open"));
  clickedElement.classList.add("open");
});

document.body.addEventListener("click", (event) => {});

</script>