#featured-services {
    background-image: linear-gradient(180deg, var(--primary), var(--primary) 40%, black 80%);
    padding: 64px;

    @media only screen and (max-width: 980px) {
        padding: 24px;
    }

    .wrap {
        height: 100%;
        overflow: hidden;
        position: relative;
        display: grid;
        justify-items: center;

        @media only screen and (min-width: 980px) {
            border: 1px solid black;
            border-bottom: none;
            border-top-left-radius: 64px;
            border-top-right-radius: 64px;
            padding: 64px;
        }


        .title-wrap {
            padding-block: 40vh;
            overflow: hidden;
            position: relative;
            justify-items: center;
            position: sticky;
            top: 0;
        
            @media only screen and (max-width: 980px) {
                padding-block: 100px;
            }

            .context {
                max-width: 60em;
                display: grid;
                align-items: center;

                .title {
                    grid-row: 1;
                    grid-column: 1;
                }

                .desc {
                    grid-row: 1;
                    grid-column: 1;           
                    font-size: 56px;
                    color: #000;
                    text-align: center;       
                }             
            }
        }

        @media only screen and (min-width: 980px) {
            .pin-height {
                height: 500vh;
            }
        }

        .expertise-cards {
            @media only screen and (min-width: 980px) {
                margin-top: -50vh;
            }

        }

        .expertise-container {
            width: 100%;
            flex-flow: row;
            justify-content: center;
            align-items: center;
            padding-right: 1.5vw;
            display: flex;

            @media only screen and (max-width: 980px) {
                display: grid;
                gap: 30px;
                padding-right: 0;
            }

            .expertise-card {

                &:not(:last-child) {
                    @media only screen and (min-width: 980px) {
                        margin-right: -1.5vw;
                    }
                }

                .media {
                    z-index: 10;
                    width: 100%;
                    aspect-ratio: 2 / 3;
                    perspective: 62.5rem;
                    display: block;
                    position: relative;
                    transform: rotate(0);

                    @media only screen and (min-width: 980px) {
                        height: 45em;
                    }

                }

                .front {
                    z-index: 1;
                    padding: 4em;
                    border: .125em solid #fff;
                    border-radius: 4em;
                    -webkit-backdrop-filter: blur(10px);
                    backdrop-filter: blur(10px);
                    color: #fff;
                    background-color: #000000e6;
                    flex-flow: column;
                    justify-content: space-between;
                    align-items: center;
                    display: flex;
                    inset: 0%;
                    overflow: hidden;

                    @media only screen and (min-width: 980px) {
                        position: absolute;
                    }

                    @media only screen and (max-width: 980px) {
                        height: 100%;
                    }

                }

                .top {
                    z-index: 10;
                    flex-direction: column;
                    grid-template-rows: auto;
                    grid-template-columns: auto 1fr;
                    grid-auto-columns: 1fr;
                    justify-content: flex-start;
                    align-items: center;
                    display: flex;
                    gap: 30px;
                    position: relative;
                }

                .tag {
                    border: 1px solid #939393;
                    width: fit-content;
                    padding: .8em 1em;
                    border-radius: 150px;
                    background: #ffffff1a;
                    margin-inline: auto;
                    text-box: cap alphabetic;
                }

                .heading {
                    font-size: 32px;
                    font-weight: 600;
                    text-align: center;
                    text-box: cap alphabetic;
                }

                .desc {
                    color: var(--text);
                    line-height: 1.3;
                    text-align: center;
                }

                .image-wrapper {
                    flex-flow: column;
                    justify-content: flex-end;
                    align-items: stretch;
                    width: 100%;
                    height: 80%;
                    display: flex;
                    position: absolute;
                    inset: auto 0% 0%;
                    overflow: hidden;     

                    .ornament-1 {
                      z-index: 4;
                      height: 10em;
                      object-fit: contain;
                      position: absolute;
                      inset: auto auto -4% -15%;
                      transform: scale(1.7)rotate(15deg);
                    }

                    .ornament-2 {
                      z-index: 4;
                      height: 10em;
                      object-fit: contain;
                      position: absolute;
                      inset: auto -17% 4% auto;
                      transform: scale(1.6)rotate(-12deg);
                    }

                    .ornament-3 {
                      z-index: 4;
                      height: 7.5em;
                      object-fit: contain;
                      position: absolute;
                      inset: auto -4% 40% auto;
                      transform: scale(1.6)rotate(-15deg);
                    }

                    .ornament-4 {
                      z-index: 4;
                      height: 5.5em;
                      object-fit: contain;
                      position: absolute;
                      inset: auto auto 44% 2%;
                      transform: scale(1.6)rotate(15deg);
                    }

                    .ornament-5 {
                      z-index: 2;
                      width: 100%;
                      object-fit: contain;
                      position: absolute;
                      bottom: -25%;
                      left: 0%;
                      right: 0%;
                    }

                    .ornament-6 {
                      z-index: 4;
                      height: 6.5em;
                      object-fit: contain;
                      position: absolute;
                      inset: auto 0% 50% auto;
                      transform: rotate(-15deg);
                    }

                    .ornament-7 {
                      z-index: 1;
                      height: 7em;
                      object-fit: contain;
                      position: absolute;
                      inset: auto auto 51% 20%;
                      transform: rotate(-10deg);
                    }

                    .ornament-8 {
                      z-index: 4;
                      height: 40em;
                      object-fit: contain;
                      position: absolute;
                      inset: auto auto -50% -20%;
                      transform: rotate(15deg);
                    }

                    .ornament-9 {
                      z-index: 3;
                      height: 12em;
                      object-fit: contain;
                      position: absolute;
                      inset: auto -11% 43% auto;
                      transform: rotate(-15deg);
                    }

                    .ornament-10 {
                      z-index: 4;
                      height: 32em;
                      object-fit: contain;
                      position: absolute;
                      bottom: -20%;
                      right: -6%;
                      transform: rotate(6deg);
                    }

                    .ornament-11 {
                      z-index: 4;
                      object-fit: contain;
                      width: 120%;
                      position: absolute;
                      bottom: 0%;
                      left: -4%;
                      right: 0%;
                      transform: rotate(-10deg);
                    }



                }
            }
        }
    }
}