* {
  box-sizing: border-box;
}
*,
::after,
::before {
  border-color: #ff40b4!important;
}

.text-pink {
    color: #ff40b4!important;
  }
body {
  font-family: "Barlow", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  display: grid;
  place-items: center;
  background: #fff;
  padding: 20px;
  width: 100%;
}
p {
  padding-bottom: 20px;
  color: #222222!important;
}
ul {
  color: #222222!important;
}
h2 {
  font-family: "Barlow Semi Condensed", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif!important;
  text-transform: uppercase;
  padding-bottom: 1rem!important;
  color: #ff40b4;
  font-weight: 600;
  line-height: 2.4rem!important;
  
  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;
  
  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;
  
  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}
.ichnicht {
  color: #ff40b4!important;
}
.text-white {
  color:#fff!important;
}

.dont-break-out {

  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;

}

.item:hover {
  --expand: 1;
}
.item:before,
.item:after {
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  background: #fff!important;
  border: 2px solid #ff40b4;
  top: 0;
  left: 0;
  z-index: -2;
}
.item:after {
  transform: translate(calc(var(--expand) * -2%), calc(var(--expand) * -2%));
  transition: transform 0.2s;
}
.item__content {
  transition: transform 0.2s;
  transform: translate(calc(var(--expand) * -2%), calc(var(--expand) * -2%));
}

.ichitem:hover {
  --expand: 1;
}
.ichitem:before, {
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  background: #fff!important;
  border: 2px solid #ff40b4!important;
  top: 0;
  left: 0;
  z-index: -2;
}

.ichitem:after {
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  background: #ff40b4!important;
  border: 2px solid #fff;
  top: 0;
  left: 0;
  z-index: -2;
}
.ichitem:after {
  transform: translate(calc(var(--expand) * -2%), calc(var(--expand) * -2%));
  transition: transform 0.2s;
}
a {
  color: #ff40b4!important;
}