/* @import url(main.css); */
                        
                         :root {
                            --cardWidth: 300px
                        }
                        
                        .card {
                            background-color: #fff;
                            border: 3px solid var(--menuItmeBlueMid);
                            border-radius: 20px;
                            padding: 16px;
                            gap: 16px;
                            display: flex;
                            flex-direction: column;
                            text-align: center;
                            font-family: IRANSansWeb_Medium;
                            font-size: 12px;
                            white-space: normal;
                        }
                        
                        .card>* {
                            flex: 1;
                            width: 100%;
                        }
                        
                        .card header {
                            gap: 16px;
                            font-family: IRANSansWeb_Bold;
                        }
                        
                        .card header img {
                            width: 100%;
                        }
                        
                        .card main {
                            gap: 8px;
                            display: flex;
                            flex-direction: column;
                        }
                        
                        .card main a {
                            width: 100%;
                            height: 32px;
                            background-color: #fff;
                            color: var(--blueBorder);
                            border: 3px solid var(--blueBorder);
                            border-radius: 42px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            text-decoration: none;
                            font-size: 16px;
                        }
                        
                        .card.selected main a,
                        .card:hover main a {
                            background-color: var(--blueBorder);
                            color: #fff;
                        }
                        
                        .card:hover main a:hover {
                            /* border-color: var(--menuItmeBlueMid); */
                            background-color: var(--menuItmeBlueMid);
                        }
                        
                        @media (min-width:980px) {
                            .card {
                                width: var(--cardWidth);
                                height: calc( var(--cardWidth) * 1.618);
                                opacity: .5;
                                transform: scale(.9);
                                transition: .3s;
                                scroll-snap-align: start;
                            }
                            .card.selected {
                                opacity: 1;
                                transform: scale(1);
                            }
                        }
                        
                        @media (max-width:980px) {
                            .card {
                                transition: .3s;
                                border-radius: 16px;
                            }
                            .card.selected {
                                grid-column-start: 1;
                                grid-column-end: 3;
                            }
                            .card:not(.selected) {
                                gap: 0;
                                opacity: .5;
                            }
                            .card:not(.selected)>* {
                                flex: unset;
                            }
                            .card:not(.selected) main {
                                height: 0;
                                overflow: hidden;
                                gap: 0;
                            }
                        }
                        
                        @media (max-height:800px) and (min-width:980px) {
                             :root {
                                --cardWidth: 200px
                            }
                        }