#services {

    @media only screen and (min-width: 980px) {
        .card-pin-height {
            width: 100%;
            height: 580vh;
            position: relative;
        }

        .card-container {
            position: sticky;
            top: 4.7em;
            overflow: hidden;
            height: 90vh;
        }

        .wrap {
            width: 100%;
            border: 1px solid #fff;
            border-radius: 64px;
            justify-content: flex-start;
            align-items: center;
            height: 90vh;
            display: flex;
            position: sticky;
            top: 4.7em;
            overflow: hidden;

            .list {
                z-index: 1;
                grid-column-gap: 1.5vw;
                grid-row-gap: 1.5vw;
                will-change: transform;
                justify-content: center;
                align-items: center;
                padding-left: 90vw;
                padding-right: 120vw;
                display: flex;

                .item {
                    display: grid;
                    gap: 30px;
                    background: black;
                    border: 1px solid #fff;
                    border-radius: 54px;
                    padding: 24px;
                    padding-bottom: 34px;
                    width: 445px;
                    overflow: hidden;

                    .foot {
                        display: flex;
                        align-items: center;

                        .heading {
                            color: #fff;
                            font-size: 32px;
                            font-weight: 600;
                            text-transform: uppercase;
                        }

                        span {
                            margin-left: auto;
                            font-size: 32px;
                        }
                    }

                    img {
                        display: block;
                        border-radius: 32px;
                        aspect-ratio: 1/1;
                        object-fit: cover;
                    }

                    .description {

                    }
                }
            }

            .dots {
                z-index: -2;
                width: 100%;
                filter: grayscale();
                pointer-events: none;
                object-fit: cover;
                height: 50%;
                position: absolute;
                bottom: 0%;
                left: 0%;
                right: 0%;
            }

            .circles {
                z-index: 0;
                opacity: .5;
                pointer-events: none;
                transform-style: preserve-3d;
                justify-content: center;
                align-items: center;
                display: flex;
                position: absolute;
                inset: 0%;

                .circle-1 {
                  z-index: 0;
                  width: 20em;
                  height: 20em;
                  border: .125em solid #3e4047;
                  border-radius: 120em;
                  position: absolute;
                }

                .circle-2 {
                  width: 32em;
                  height: 32em;
                  border: .125em solid #3e4047;
                  border-radius: 120em;
                  position: absolute;
                }

                .circle-3 {
                  width: 45em;
                  height: 45em;
                  border: .125em solid #3e4047;
                  border-radius: 120em;
                  position: absolute;
                }

                .circle-4 {
                  width: 60em;
                  height: 45em;
                  border: .125em solid #3e4047;
                  border-radius: 120em;
                  position: absolute;
                }

                .circle-5 {
                  width: 75em;
                  height: 45em;
                  border: .125em solid #3e4047;
                  border-radius: 120em;
                  position: absolute;
                }

            }

        }
    }



    @media only screen and (max-width: 980px) {
        .wrap {
            .dots {
                display: none;
            }
            
            .list {
                display: grid;
                gap: 30px;

                .item {
                    display: grid;
                    gap: 30px;
                    background: black;
                    border: 1px solid #fff;
                    border-radius: 54px;
                    padding: 24px;
                    padding-bottom: 34px;
                    overflow: hidden;

                    .foot {
                        display: flex;
                        align-items: center;

                        .heading {
                            color: #fff;
                            font-size: 32px;
                            font-weight: 600;
                            text-transform: uppercase;
                        }

                        span {
                            margin-left: auto;
                            font-size: 32px;
                        }
                    }

                    img {
                        display: block;
                        border-radius: 32px;
                        aspect-ratio: 1/1;
                        object-fit: cover;
                    }
                }
            }
        }
    }


}