.block-category {
&__item {
background-size: cover;
height: 325px;
border-radius: $border-radius;
overflow: hidden;
margin-bottom: 2rem;
position: relative;
transition: $transition;
&:before {
content:'';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to right, #45cc9c 0%, #39b5f1 100%);
opacity: 0;
transition: $transition;
}
&:hover {
box-shadow: 0px 5px 30px 0px rgba(0, 0, 0, 0.1);
&:before {
opacity: .5;
}
.block-category__button {
background: linear-gradient(to right, #45cc9c 0%, #39b5f1 100%);
color: $white;
}
}
}
&__count {
&:before {
content:'';
position: absolute;
border: 60px solid transparent;
border-top: 60px solid #ffce64;
top: 0;
left: 50%;
transform: translateX(-50%);
}
}
&__number {
position: absolute;
top: .5rem;
left: 50%;
transform: translateX(-50%);
z-index: 10;
font-weight: 800;
color: #5372ab;
font-size: 1.25rem;
}
&__button {
display: inline-block;
border-width: 3px;
border-color: rgb(235, 235, 235);
border-style: solid;
border-radius: 10px;
background-color: rgb(255, 255, 255);
font-size: 1rem;
color: rgb(0, 0, 0);
font-weight: 700;
text-transform: uppercase;
text-align: center;
letter-spacing: 3px;
padding: .8rem 1.8rem;
position: absolute;
bottom: 1.5rem;
left: 50%;
transform: translateX(-50%);
transition: $transition;
white-space: nowrap;
}
}
Подскажите, как бы вы сократили код выше? Про border я знаю :)