.block-sravnenie { display: flex; flex-direction: column; justify-self: center; padding: 20px; box-sizing: border-box; } .block-sravnenie h2 { margin-bottom: 40px; } .block-sravnenie>.zagolovok { font-size: 26px; font-weight: 500; letter-spacing: 1px; margin-bottom: 35px; text-transform: uppercase; } .block-sravnenie .blocks { display: flex; gap: 20px; margin: auto; } .block-sravnenie .block { max-width: 400px; height: auto; border-radius: 20px; padding: 20px; box-sizing: border-box; background: rgb(248, 248, 248); flex: 1; display: flex; flex-direction: column; box-shadow: 0px 2px 6px 0px rgba(140, 142, 152, 0.2); border: 1px solid rgb(219 133 182); } .block-sravnenie .block.active { background-image: linear-gradient(0.894turn, rgb(219 133 182) 0%, rgb(87, 71, 213) 100%); border: 1px solid white; } .block-sravnenie.blue .block { box-shadow: 0 0 0px 6px #ecf5f8; border-color: #cfe0e5; background-image: linear-gradient(0.894turn, #d5e9f0 0%, white 100%); } .block-sravnenie.blue .block.vtoroy { background-image: linear-gradient(0.894turn, #d5d5d5 0%, #ffffff 100%); border: 1px solid white; box-shadow: 0 0 0px 6px #f5f5f5; } .block-sravnenie.blue .block.active { background-image: linear-gradient(0.894turn, #0079c9 0%, #7dd9fd 100%); border: 1px solid white; } .block-sravnenie.cartochki-sravnenie.blue .curs-images-zagolovok { background-color: rgb(225, 225, 225, 0.6); } .block-sravnenie.cartochki-sravnenie.blue .block.active .curs-images-zagolovok { background-color: rgb(7, 126, 204, 0.6); } .block-sravnenie.cartochki-sravnenie .block.active { position: relative; overflow: hidden; margin: -20px 0; } /*Блик на блоке On*/ .block-sravnenie.cartochki-sravnenie .block.active::before { content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient( to right, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100% ); transform: skewX(-25deg); animation: elegant-shine 3s infinite; z-index: 1; pointer-events: none; } @keyframes elegant-shine { 0% { left: -100%; opacity: 0; } 10% { opacity: 0.8; } 20% { opacity: 1; } 80% { opacity: 1; } 90% { opacity: 0.8; } 100% { left: 200%; opacity: 0; } } .block-sravnenie .block .curs-text { color: var(--grey-text); } .block-sravnenie .block.active .curs-text { color: rgb(255, 255, 255, 1); } .block-sravnenie .curs-text .curs-text-zagolovok { font-weight: 600; text-transform: uppercase; font-size: 18px; margin: 15px 0; display: none; } .block-sravnenie .curs-text .sravnenie-text { line-height: 20px; margin: 15px 0; min-height: 120px; } .block-sravnenie .curs-text .sravnenie-text .spisok { font-size: 12px; margin-bottom: 40px; } .block-sravnenie .curs-text .sravnenie-text .spisok li { padding: 12px 20px; margin: 5px 0; border-radius: 5px; background-color: white; border: 1px solid rgba(0,0,0,0.06); line-height: 20px; } .block-sravnenie .active .curs-text .sravnenie-text .spisok li { background-color: rgba(255,255,255,0.2); color: white; border: 1px solid rgba(255,255,255,0.2); display: flex; position: relative; } .block-sravnenie .curs-text .sravnenie-text .spisok li.li-zagolovok { border: none; background-color: inherit; font-weight: 600; font-size: 14px; min-width: 100px; justify-self: center; padding: 0 5px; margin: 20px 0 10px 0; } .block-sravnenie .curs-button { text-align: center; margin: auto 0 15px 0; } .block-sravnenie .block .curs-button>a { display: inline-block; padding: 15px 25px; border-radius: 5px; box-shadow: 0 0 20px 0px rgba(0,0,0,0.3); background-color: white; color: black; text-decoration: none; cursor: pointer; border: none; text-align: center; min-width: 150px; } .block-sravnenie .block.active .curs-button>a { box-shadow: none; } .block-sravnenie .curs-images { display: flex; width: 100%; height: 180px; background-repeat: no-repeat; background-size: cover; background-position: center; border-radius: 12px; overflow: hidden; justify-content: center; align-items: flex-end; flex: none; } .block-sravnenie .curs-images-zagolovok { font-weight: 500; text-transform: uppercase; font-size: 16px; margin: 0; padding: 5px; color: white; background-color: rgb(87, 71, 213, 0.5); display: flex; width: 100%; justify-content: center; } .block-sravnenie.cartochki-sravnenie .block .curs-text { height: 100%; display: flex; flex-direction: column; } .block-sravnenie.cartochki-sravnenie .curs-images-zagolovok { font-weight: 800; text-shadow: 1px 1px 2px black; font-size: 22px; text-align: center; padding: 0; border-radius: 12px; background-color: rgb(219 133 182); } .block-sravnenie.cartochki-sravnenie .block.active .curs-images-zagolovok { background-color: rgb(87, 71, 213, 0.5); } .block-sravnenie.cartochki-sravnenie .block { min-width: 400px; } .block-sravnenie.cartochki-sravnenie>.zagolovok { text-align: center; } .block-sravnenie.cartochki-sravnenie .curs-button { margin: auto 0 0 0; } .block-sravnenie.cartochki-sravnenie .curs-text .sravnenie-text { margin: 15px 0 0 0; min-height: 100px; display: flex; flex-direction: column; height: 100%; } .block-sravnenie.cartochki-sravnenie .curs-text .sravnenie-text .spisok { margin-bottom: 20px; } .block-sravnenie.cartochki-sravnenie .curs-text .sravnenie-text .sravnenie-price { margin: 30px 0; display: flex; flex-direction: column; height: 100%; justify-content: end; align-items: center; } .block-sravnenie.cartochki-sravnenie .curs-text .sravnenie-text .sravnenie-price .price-02 { font-size: 24px; } .block-sravnenie.cartochki-sravnenie .curs-text .sravnenie-text .sravnenie-price .price-02 span { text-decoration: line-through; opacity: 0.6; } @media (max-width:1220px) { .block-sravnenie.cartochki-sravnenie .block { min-width: 300px; } } @media (max-width:1000px) { .block-sravnenie.cartochki-sravnenie { justify-self: auto; } .block-sravnenie.cartochki-sravnenie .blocks { width: 100%; padding-bottom: 10px; overflow: scroll; padding: 25px 5px; } .block-sravnenie h2 { margin-bottom: 20px; } } @media (max-width: 550px) { .block-sravnenie .curs-text .sravnenie-text .spisok { font-size: 14px; margin-bottom: 40px; } .block-sravnenie .curs-text .sravnenie-text .spisok li { padding: 10px 20px; margin: 6px 0; } .block-sravnenie.cartochki-sravnenie { width: 100%; } .block-sravnenie>.zagolovok { margin-bottom: 15px; } .block-sravnenie.cartochki-sravnenie .blocks { flex-direction: column; overflow: inherit; width: auto; } .block-sravnenie.cartochki-sravnenie .block { flex-direction: column; width: 100%; max-width: none; } .block-sravnenie.cartochki-sravnenie .block.active { box-shadow: 0 0 20px -2px rgb(87, 71, 213); margin: 0; } .block-sravnenie.cartochki-sravnenie.blue .block.active { box-shadow: 0 0 20px -2px #e27237; } .block-sravnenie.cartochki-sravnenie .curs-images { height: 200px; } }