.services-container .services-wrapper{grid-gap:20px;display:grid;grid-template-columns:1fr 1fr 1fr}.services-container .length-1{grid-template-areas:"service-1 . ." ". . ." ". . ."}.services-container .length-2{grid-template-areas:"service-1 service-2 ." ". . ." ". . ."}.services-container .length-3{grid-template-areas:"service-1 service-2 service-3" ". . ." ". . ."}.services-container .length-4{grid-template-areas:"service-1 service-2 ." "service-3 service-4 ." ". . ."}.services-container .length-5{grid-template-areas:"service-1 . ." "service-2 service-3 service-4" "service-5 ."}.services-container .length-6{grid-template-areas:"service-1 . ." "service-2 service-3 ." "service-4 service-5 service-6"}.services-container .block{position:relative}.services-container .block .shadow{border-radius:4.5px;height:100%;left:7px;position:absolute;top:7px;transition:all .25s ease;width:100%;z-index:-1}.services-container .block .shadow-yellow{background:var(--brand-yellow-500)}.services-container .block .shadow-teal{background:var(--brand-teal-500)}.services-container .block .shadow-green{background:var(--brand-green-500)}.services-container .block .shadow-black{background:var(--black)}.services-container .service-1{grid-area:service-1}.services-container .service-2{grid-area:service-2}.services-container .service-3{grid-area:service-3}.services-container .service-4{grid-area:service-4}.services-container .service-5{grid-area:service-5}.services-container .service-6{grid-area:service-6}.services-container .text-wrapper{background:var(--white);border:2px solid #000;border-radius:4.5px;display:flex;flex-direction:column;z-index:2}@media screen and (max-width:800px){.services-container .services-wrapper{grid-template-columns:1fr 1fr}.services-container .length-5{grid-template-areas:"service-1 . ." "service-2 service-3" "service-4 service-5 "}.services-container .length-6{grid-template-areas:"service-1 service-2" "service-3 service-4" "service-5 service-6"}}@media screen and (max-width:600px){.services-container .services-wrapper{grid-template-columns:1fr}.services-container .length-1{grid-template-areas:"service-1 . ." ". . ." ". . ."}.services-container .length-2{grid-template-areas:"service-1" "service-2"}.services-container .length-3{grid-template-areas:"service-1" "service-2" "service-3"}.services-container .length-4{grid-template-areas:"service-1" "service-2" "service-3" "service-4"}.services-container .length-5{grid-template-areas:"service-1" "service-2" "service-3" "service-4" "service-5"}.services-container .length-6{grid-template-areas:"service-1" "service-2" "service-3" "service-4" "service-5" "service-6"}}