.cards-wrapper {
  position: relative;
  display: block;
  margin: -10rem auto 0 auto;
  z-index: 500;
}
.cards-wrapper.kommune {
  margin: 0 auto 15rem auto;
}

.cards {
  position: relative;
  display: flex;
  justify-content: center;
  width: calc(100% - var(--pagePaddingCalc));
  margin: auto;
  gap: 3rem;
  filter: drop-shadow(0 2rem 6rem rgba(0, 0, 0, 0.09));
}
.cards.center {
  text-align: center;
}
.cards.three-row {
  max-width: 98rem;
}
.cards.two-row {
  max-width: 70rem;
}
.cards.three-row .card-element {
  width: calc(33.33% - 2rem);
}
.cards.two-row .card-element {
  width: calc(50% - 2rem);
}

.card-element {
  display: flex;
  flex-direction: column;
  position: relative;
  border-radius: 4.2rem;
  background-color: var(--colorWhite);
  outline-offset: 0.5rem;
  border: none;
  cursor: pointer;
}
.card-element.bg-kommune-01 {
  background: rgb(220, 248, 255);
  background: linear-gradient(180deg, rgb(220, 248, 255) 0%, rgb(160, 210, 222) 100%);
}
.card-element.bg-kommune-02 {
  background: rgb(249, 209, 208);
  background: linear-gradient(180deg, rgb(249, 209, 208) 0%, rgb(247, 169, 169) 100%);
}
.card-element.bg-kommune-03 {
  background: rgb(222, 246, 192);
  background: linear-gradient(180deg, rgb(222, 246, 192) 0%, rgb(175, 214, 126) 100%);
}

button.card-element {
  appearance: none;
}

.card-picture {
  position: relative;
  width: calc(100% - var(--pagePaddingCalc));
  margin: 3rem auto 0 auto;
}
.card-picture img {
  position: absolute;
  display: block;
  margin: auto;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  transition: var(--transitionStandard);
}

.card-bg-wrap {
  position: relative;
  width: calc(100% - 2rem);
  margin: auto;
  overflow: hidden;
}
.card-bg-wrap:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.card-bg {
  position: absolute;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.card-bg.red {
  background-color: #fab8c3;
}
.card-bg.darkblue {
  background-color: #5957e9;
}
.card-bg.lightblue {
  background-color: #91c7fb;
}
.card-bg.lightblue2 {
  background-color: #7e98ff;
}

.card-el-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  position: relative;
  padding: 3.4rem;
}

.cards.bg .card-el-text {
  --margin: 1.5rem;
  background-color: var(--colorWhite);
  border-radius: 3.1rem;
  width: calc(100% - var(--margin) * 2);
  margin-inline: var(--margin);
  margin-block: var(--margin);
  box-sizing: border-box;
  margin-top: calc(var(--margin) * 2);
  padding: 2.5rem;
}

.card-el-text strong {
  font-size: clamp(2.4rem, var(--fsClamp-scaler-p), 3.2rem);
  line-height: var(--lineHeight-Title);
  font-weight: var(--fontWeight-Bold);
  margin: 0 0 1.2rem 0;
}
.card-el-text p {
  font-size: var(--fontSize-Root);
  line-height: 1.6;
  font-weight: 300;
  color: var(--darkGrey);
  margin: 0 0 5rem 0;
}
.card-el-text .card-link {
  position: relative;
  display: inline;
  font-size: clamp(1.3rem, var(--fsClamp-scaler-p), 1.6rem);
  font-weight: 400;
  color: var(--textColorBlog);
  align-self: flex-start;
  margin-top: auto;
}

.cards.center .card-el-text .card-link {
  align-self: center;
  left: -0.5rem;
}

.card-el-text .card-link:after {
  position: relative;
  display: inline-block;
  content: "";
  background-image: url("/wp-content/themes/vigilo-2022/img/2021/contact/Arrow.svg");
  background-size: contain;
  background-repeat: no-repeat;
  width: 0.9rem;
  height: 1.5rem;
  right: -1rem;
  transition: var(--transitionStandard);
  top: 50%;
  transform: translateY(-50%);
  margin-top: 0.1rem;
}

.card-element:hover .card-link:after, .card-element:focus-within .card-link:after, .card-element:focus .card-link:after {
  right: -1.8rem;
}
.card-element:hover .card-picture img, .card-element:focus-within .card-picture img, .card-element:focus .card-picture img {
  transform: translateY(-50%) scale(1.1);
}

.contact-bottom {
  position: relative;
  display: block;
  width: 100%;
  max-width: 98rem;
  margin: auto;
  z-index: 501;
}
.contact-bottom p {
  font-size: clamp(1.6rem, var(--fsClamp-scaler-p), 1.8rem);
  color: #31313b;
  max-width: 39rem;
  line-height: 180%;
  text-align: center;
  margin: 5rem auto 0 auto;
  padding: 0 22rem;
}
.contact-bottom a {
  color: var(--vigiloDarkBlue);
  text-decoration: underline;
}

.contact-V3D {
  display: block;
  margin: -16rem 0 0 -4rem;
  text-align: left;
  pointer-events: none;
}
.contact-V3D img {
  width: 100%;
  max-width: 38.5rem;
  text-align: left;
}

@media screen and (max-width: 1550px) {
  .cards-wrapper {
    margin: -9rem auto 0 auto;
  }
}
@media screen and (max-width: 1500px) {
  .cards-wrapper {
    margin: -6rem auto 0 auto;
  }
}
@media screen and (max-width: 870px) {
  .cards-wrapper {
    margin: -5rem auto 0 auto;
  }
}
@media screen and (max-width: 830px) {
  .card-el-text {
    padding: 2.4rem;
  }
  .card-el-text p {
    margin: 0 0 3rem 0;
  }
  .card-element {
    border-radius: 2.6rem;
  }
  .cards.bg .card-el-text {
    --margin: 1rem;
    border-radius: 2rem;
  }
  .cards.two-row .card-element {
    width: 50%;
  }
}
@media screen and (max-width: 810px) {
  .contact-bottom p {
    margin: 3rem auto 0 auto;
  }
  .contact-V3D {
    margin: -13rem 0 0 0;
  }
  .contact-V3D img {
    max-width: 31.5rem;
  }
}
@media screen and (max-width: 760px) {
  .cards {
    flex-wrap: wrap;
    gap: 2rem;
  }
  .cards.three-row .card-element {
    width: calc(50% - 2rem);
  }
  .cards.two-row .card-element {
    width: 50%;
  }
}
@media screen and (max-width: 695px) {
  .contact-bottom p {
    padding: 0;
  }
  .contact-V3D {
    text-align: center;
    margin: 3rem auto 0 auto;
  }
}
@media screen and (max-width: 550px) {
  .cards-wrapper {
    margin: -7rem auto 0 auto;
  }
  .cards.three-row .card-element, .cards.two-row .card-element {
    width: 100%;
  }
  .card-element {
    background-color: transparent;
    border-radius: 0;
    text-align: center;
  }
  .cards.bg .card-element {
    border-radius: 2.6rem;
  }
  .card-picture {
    width: 100%;
    max-width: 21rem;
  }
  .card-el-text .card-link {
    align-self: center;
    left: -0.5rem;
  }
  .card-element:not(.cards.bg .card-element):after {
    content: "";
    width: 100%;
    max-width: 20rem;
    height: 0.1rem;
    border-bottom: 0.1rem solid var(--colorGrey02);
    margin: 3rem auto;
  }
}