:root {
  --elastic: transform 0.6s linear(0 0%, 0.22 2.1%, 0.86 6.5%, 1.11 8.6%, 1.3 10.7%, 1.35 11.8%, 1.37 12.9%, 1.37 13.7%, 1.36 14.5%, 1.32 16.2%, 1.03 21.8%, 0.94 24%, 0.89 25.9%, 0.88 26.85%, 0.87 27.8%, 0.87 29.25%, 0.88 30.7%, 0.91 32.4%, 0.98 36.4%, 1.01 38.3%, 1.04 40.5%, 1.05 42.7%, 1.05 44.1%, 1.04 45.7%, 1 53.3%, 0.99 55.4%, 0.98 57.5%, 0.99 60.7%, 1 68.1%, 1.01 72.2%, 1 86.7%, 1 100%);
}

/* Services */
.services-wrapper {display: grid;grid-template-columns: repeat(3, 1fr);grid-template-rows: repeat(5, 1fr);gap: var(--space-xs);}
  
.services-wrapper > a {background:var(--darkblue); color:#fff; padding: var(--space-l); border-radius:var(--border-radius-m); display:flex; flex-direction: column; position:relative; overflow:hidden; transition: var(--elastic);}
.services-wrapper > a .service-content {position:relative;; display: flex; flex-direction: column; z-index: 1;}
.services-wrapper > a .service-content p {color:#fff; margin:0px}
.services-wrapper > a .service-content h3 {color:#fff; margin-top:0px; margin-bottom:32px;}

.services-wrapper > a:nth-child(1) {grid-column: span 2 / span 2; grid-row: span 2 / span 2;}
.services-wrapper > a:nth-child(1) .service-content {width:60%;}

.services-wrapper > a:nth-child(2) {grid-row: span 3 / span 3; grid-column-start: 3; min-height:600px; justify-content: center}
.services-wrapper > a:nth-child(2) .service-content {margin-top:auto}

.services-wrapper > a:nth-child(3) {grid-row: span 3 / span 3; grid-row-start: 3;}
.services-wrapper > a:nth-child(3) .service-content {margin-top:auto}

.services-wrapper > a:nth-child(4) {grid-row: span 3 / span 3; grid-row-start: 3;}

.services-wrapper > a:nth-child(5) {grid-row: span 2 / span 2; grid-column-start: 3; grid-row-start: 4; background:var(--sand); justify-content: center;}
.services-wrapper > a:nth-child(5) .service-content p,
.services-wrapper > a:nth-child(5) .service-content h3 {color:var(--darkblue)}

.services-wrapper > a:after {content:""; position:absolute; background-size:contain; background-position: center; background-repeat: no-repeat; pointer-events:none; transition: var(--elastic)}

.services-wrapper > a:nth-child(1):after {background-image: var(--shape-rocket-pink); width:400px; height:400px; top:0; right:0; transform: translateX(20%) translateY(-1%) rotate(30deg);}
.services-wrapper > a:nth-child(2):after {background-image: var(--shape-nugget-yellow); width:400px; height:400px; top:0; left:0; transform: translateX(-5%) translateY(-50%) rotate(-15deg);}
.services-wrapper > a:nth-child(3):after {background-image: var(--shape-flare-green); width:400px; height:400px; top:0; left:0; transform: translateX(-15%) translateY(-45%) rotate(-24deg)}
.services-wrapper > a:nth-child(4):after {background-image: var(--shape-blockhead-blue); width:400px; height:400px; bottom:0; right:0; transform: translateX(10%) translateY(50%) rotate(-5deg)}


.services-wrapper > a:nth-child(1):hover {transform:rotate(1deg)}
.services-wrapper > a:nth-child(2):hover {transform:rotate(1deg)}
.services-wrapper > a:nth-child(3):hover {transform:rotate(-1deg)}
.services-wrapper > a:nth-child(4):hover {transform:rotate(1deg)}
.services-wrapper > a:nth-child(5):hover {transform:rotate(-1deg)}

.services-wrapper > a:nth-child(1):hover:after {
  transform: translateX(20%) translateY(-1%) rotate(30deg) scale(1.1);
}

.services-wrapper > a:nth-child(2):hover:after {
  transform: translateX(-5%) translateY(-50%) rotate(-15deg) scale(1.1);
}

.services-wrapper > a:nth-child(3):hover:after {
  transform: translateX(-15%) translateY(-45%) rotate(-24deg) scale(1.1);
}

.services-wrapper > a:nth-child(4):hover:after {
  transform: translateX(10%) translateY(50%) rotate(-5deg) scale(1.1);
}