/* Bakground images */

#interior {
  background-image: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.4)), url("../../assets/img/rullgardiner/Rullgardiner_17.jpg")!important;
}

@media (min-width: 1200px) {
  #interior {
    background-image: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.4)), url("../../assets/img/rullgardiner/Rullgardiner_6.jpg")!important;
  }
}

#exterior {
  background-image: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.4)), url("../../assets/img/fa42/FA42_4.jpg")!important;
}

@media (min-width: 1200px) {
  #exterior {
    background-image: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.4)), url("../../assets/img/utvandigt-solskydd/FA42-ZIP100_3.jpg")!important;
  }
}

/* Shared styles for both elements */

.big-image-link {
  height: calc(80vh - 200px);
  min-height: 500px !important;
  background-size: 100% 100%;
  transition: background-size 1s ease-in-out !important;
  display: block;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
}

/* Hover effect for zooming */

.big-image-link:hover {
  background-size: 120% 120% !important;
}

.big-image {
  background: url("../../assets/img/rullgardiner/Rullgardiner_6.jpg") center / cover no-repeat, #ffffff;
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 1.5s;
  display: inline-block;
  overflow: hidden;
  height: 800px;
}

/* Button Text Animation */

.big-image-link:hover .button-primary .arrow-forward {
  transform: translateX(30px);
  animation: arrowslideleft 0.5s forwards;
}

.big-image-link:hover .button-primary .arrow-forward {
  color: var(--bs-primary)!important;
  transform: translateX(30px);
  animation: arrowslideleft 0.5s forwards;
}

.big-image-link:hover .button-primary {
  background-position: 0 100%;
  color: var(--bs-primary) !important;
}