@import url(https://fonts.googleapis.com/css2?family=Exo+2:wght@100&display=swap);.page-main{height:100vh;font-family:"Trebuchet MS",Arial,sans-serif;color:#000;background-image:url(./img/pattern.png);background-color:#000;background-repeat:repeat}.product{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:calc(100% - 160px);max-width:1120px}.product__title{margin:0 auto;font-family:'Exo 2',Arial,sans-serif;font-weight:100;font-size:36px;letter-spacing:.005em;color:#fff;text-align:center;text-shadow:0 1px 1px #000}.product__list{margin-top:23px;padding:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;width:100%;list-style:none}.product__item{min-width:320px;width:320px}.card{position:relative;padding-left:47px;height:473px;background-color:#F2F2F2;background-image:url(./img/cat.png);background-repeat:no-repeat;background-position:-28px 205px;border:4px solid #1698D9;border-radius:12px;-webkit-clip-path:polygon(14% 0,100% 0,100% 100%,0 100%,0% 9%);clip-path:polygon(14% 0,100% 0,100% 100%,0 100%,0% 9%);cursor:pointer}.card:before{position:absolute;top:-15px;left:15px;content:'';width:6px;height:70px;background:#1698D9;display:block;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.card__subtitle{margin:0;margin-top:18px;font-size:16px;color:#666}.card__title{margin:0;margin-top:6px;margin-left:-3px;font-size:48px}.card__flavor{margin:0;margin-top:-2px;font-size:24px;letter-spacing:.02em}.card__description{margin:0;margin-top:15px;margin-left:1px;font-size:14px;color:#666;line-height:16px}.card__size{position:absolute;bottom:12px;right:12px;width:80px;height:80px;border-radius:50%;color:#fff;text-align:center;background-color:#1698D9}.size__number{margin:0;margin-top:7px;font-size:42px}.size__text{margin:0;margin-top:-6px;font-size:20px}.item__text{margin:0;margin-top:14px;font-size:13px;color:#fff;text-align:center}.item__link{cursor:pointer;color:#1698D9;text-decoration:underline;-webkit-text-decoration-style:dashed;text-decoration-style:dashed}.card:hover:not(.disabled):not(.selected){border-color:#2EA8E6}.card:hover:not(.disabled):not(.selected)::before{background-color:#2EA8E6}.card:hover:not(.disabled):not(.selected) .card__size{background-color:#2EA8E6}.selected{border-color:#D91667}.selected::before{background-color:#D91667}.selected .card__size{background-color:#D91667}.selected:hover{border-color:#E52E7A}.selected:hover::before{background-color:#E52E7A}.selected:hover .card__size{background-color:#E52E7A}.disabled{background-image:none;border-color:#B3B3B3}.disabled::before{background-color:#B3B3B3}.disabled::after{content:"";background:url(./img/cat.png);background-repeat:no-repeat;background-position:-28px 205px;opacity:.5;top:0;left:0;bottom:0;right:0;position:absolute;z-index:-1}.disabled p,.disabled h2{opacity:.5}.disabled .card__size p{opacity:1}.disabled+.item__text{color:#FF6}.disabled .card__size{background-color:#B3B3B3}@media only screen and (min-width :320px) and (max-width :480px){.page-main{height:auto}.product{position:relative;top:0;left:0;margin:0 auto;padding-top:10%;-webkit-transform:none;-ms-transform:none;transform:none}.product__list{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.product__item{margin:10% 0}}@media only screen and (min-width :480px) and (max-width :1024px){.page-main{height:auto}.product{position:relative;top:0;left:0;margin:0 auto;padding-top:10%;-webkit-transform:none;-ms-transform:none;transform:none;width:100%}.product__list{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-ms-flex-wrap:wrap;flex-wrap:wrap}.product__item{margin:3%}}