#expertise {
    padding-block: 164px;

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

    .list {
        display: grid;
        gap: 164px;


        .item {
            display: grid;
            gap: 50px;


            .head {
                display: grid;
                grid-template-columns: 2fr 1fr;
                gap: 50px;

                .points {
                    .point {
                        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
                        padding-block: 12px;
                        display: flex;
                        gap: 12px;

                        span {
                            color: var(--primary);
                        }
                    }

                }

                @media only screen and (max-width: 980px) {
                    grid-template-columns: 1fr;
                }

            }

            .body {
                display: grid;
                gap: 10px;            
                max-width: 25rem;

                .subhead {
                    font-size: 32px;
                }
            }

            .foot {
                overflow: hidden;
                position: relative;

                .images {
                    border-radius: 64px;
                    position: relative;
                    border: 1px solid rgba(255,255,255, 0.2);
                    overflow: hidden;
                    cursor: none;


                    .carousel {
                        display: flex;
                        transition: all 1s;
                        transform: translateX(calc(-100% * var(--current)));
                        width: 100%;
                    }

                    .image {
                        background-size: cover;
                        height: 70vh;
                        width: 100%;
                        flex: 0 0 100%; /* shorthand for flex-grow: 0; flex-shrink: 0; flex-basis: 100% */

                        .inner {
                            padding: 64px;
                            height: 100%;
                        }

                        .content {
                            display: grid;
                            align-content: space-between;
                            gap: 20px;
                            max-width: 25rem;
                            height: 100%;

                            .heading {
                                font-size: 48px;
                                color: #000;
                            }

                            .description {
                                color: #000;
                            }
                        }
                    }   


                    .access {
                        background: var(--primary);
                        color: #fff;
                        text-box: cap alphabetic;
                        border-radius: 250px;
                        padding: 10px 16px;
                        width: fit-content;
                        height: fit-content;
                        position: absolute;
                        top: 0;
                        left: 0;
                        pointer-events: none;
                        transform: translate(-50%, -50%);
                        will-change: transform;
                        transition: transform 0.05s linear; /* Optional */
                    }  


                }
            }

        }   
    }

}