.widget-categories {
display: flex;
flex-direction: column;
align-items: center;
margin: 0 auto;
}
.category-heading {
text-align: left;
}
.category-heading h2 {
font-weight: 600 !important;
}
.category-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
margin-top: 40px;
}
.category-item {
position: relative;
width: 23%;
min-width: 250px;
height: auto;
display: flex;
justify-content: center;
align-items: center;
transition: 0.3s;
aspect-ratio: 1/1;
}
.category-item a {
width: 100%;
height: 100%;
}
.category-item.all a {
display: flex;
justify-content: center;
align-items: center;
}
.category-item:hover {
transform: scale(1.02);
}
.category-item-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.category-item-img img {
width: 100%;
height: 100% !important;
object-fit: cover;
}
.category-item-title {
position: absolute;
left: auto;
padding: 4px 16px 4px 4px;
font-family: "Livvic", sans-serif;
font-size: 20px;
line-height: 22px;
background: #FFF;
border-radius: 0 2px 2px 0;
z-index: 10;
}
.category-item.all .category-item-title {
position: unset;
left: unset;
padding: 0;
font-size: 32px;
font-weight: 500;
line-height: 36px;
text-align: center;
background: unset;
color: #FFF;
border-radius: 0;
}
.category-item-title.title-top {
top: 20px;
}
.category-item-title.title-bottom {
bottom: 20px;
}
.category-item:hover .category-item-title {
left: -1px;
}
@media screen and (max-width: 768px) {
.category-item {
width: 31%;
min-width: 220px;
}
.category-item.all .category-item-title {
font-size: 28px;
line-height: 32px;
}
}
@media screen and (max-width: 576px) {
.category-item-title {
font-size: 16px;
}
.category-item {
width: 46%;
min-width: 170px;
}
.category-item.all .category-item-title {
font-size: 24px;
line-height: 28px;
}
}