.catalog {
padding: 180px 0 140px;
}
.catalog__top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.catalog__filters {
display: flex;
align-items: center;
gap: 20px;
}
.catalog__filter-btn {
--c: #525252;
padding: 10px 20px;
border-radius: 10px;
border: 1px solid var(--c);
font-size: 18px;
color: var(--c);
transition: border-color 0.3s, background-color 0.3s, color 0.3s;
}
.catalog__filter-btn:hover {
--c: #0c0c0c;
}
.catalog__filter-btn.active {
border-color: var(--color-orange);
color: var(--color-white);
background-color: var(--color-orange);
}
.products {
margin-top: 80px;
display: flex;
gap: 50px 30px;
flex-wrap: wrap;
}
.products__item {
width: calc((100% - 90px) / 4);
}
.products__item.hidden {
display: none;
}
.product-card {
--br: 20px;
position: relative;
display: flex;
flex-direction: column;
height: 100%;
border-radius: var(--br);
transition: transform 0.3s, box-shadow 0.3s;
}
.product-card:hover {
box-shadow: 0px 2px 30px 0px rgba(104, 104, 104, 0.14);
transform: translateY(-20px);
}
.product-card__link {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.product-card__img {
position: relative;
aspect-ratio: 1;
background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTc2IiBoZWlnaHQ9IjE1NyIgdmlld0JveD0iMCAwIDE3NiAxNTciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIGlkPSJpY29uLXBhcmstb3V0bGluZTpsZWF2ZXMiIGNsaXAtcGF0aD0idXJsKCNjbGlwMF82M18xMzUyOCkiPgo8ZyBpZD0iR3JvdXAiPgo8cGF0aCBpZD0iVmVjdG9yIiBkPSJNODUuMjUgMTQzLjI1Qzg1LjI1IDE0My4yNSA0OS41IDE0NiAzMC4yNSAxMjRDMTEgMTAyIDExIDM2IDExIDM2QzExIDM2IDc3IDMzLjI1IDk5IDQ5Ljc1QzEyMSA2Ni4yNSAxMTUuNSAxMTMgMTE1LjUgMTEzIiBzdHJva2U9IndoaXRlIiBzdHJva2Utb3BhY2l0eT0iMC40IiBzdHJva2Utd2lkdGg9IjYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBpZD0iVmVjdG9yXzIiIGQ9Ik0xMjEgMTQ2QzEyMSAxNDYgOTAuMjU1IDEyMi43NjUgNzEuNSAxMDJNNzEuNSAxMDJDNTIuNzQ1IDgxLjIzMiA0NCA2MC43NSA0NCA2MC43NU03MS41IDEwMkw3NC4yNSA2Ni4yNU03MS41IDEwMkw0NCA5OS4yNSIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLW9wYWNpdHk9IjAuNCIgc3Ryb2tlLXdpZHRoPSI2IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8ZyBpZD0iR3JvdXBfMiI+CjxwYXRoIGlkPSJWZWN0b3JfMyIgZD0iTTEyNy4wNzggNTQuNDE2NkMxMjcuMDc4IDU0LjQxNjYgMTIwLjIwMyA0MC4zNjE3IDEyNi4wMjQgMjkuMDEwOUMxMzEuODQ1IDE3LjY2MDIgMTU4LjYxIDcuMDI3NjkgMTU4LjYxIDcuMDI3NjlDMTU4LjYxIDcuMDI3NjkgMTcwLjM1OCAzMy4zNTAxIDE2Ny4yMSA0NC45MzAxQzE2NC4wNjMgNTYuNTEgMTQ0LjIxOCA2MS44MTA5IDE0NC4yMTggNjEuODEwOSIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLW9wYWNpdHk9IjAuMiIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggaWQ9IlZlY3Rvcl80IiBkPSJNMTMxLjcyMSA2OS4zNTY1QzEzMS43MjEgNjkuMzU2NSAxMzYuMTkxIDUzLjE0NTIgMTQxLjU5IDQyLjE5NDFNMTQxLjU5IDQyLjE5NDFDMTQ2Ljk5MSAzMS4yNDI1IDE1My44ODkgMjQuMzk2NSAxNTMuODg5IDI0LjM5NjVNMTQxLjU5IDQyLjE5NDFMMTU2LjUzMSAzNy41NU0xNDEuNTkgNDIuMTk0MUwxMzguMjc1IDMwLjU5ODgiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS1vcGFjaXR5PSIwLjIiIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjwvZz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF82M18xMzUyOCI+CjxyZWN0IHdpZHRoPSIxNzYiIGhlaWdodD0iMTU3IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo="),
linear-gradient(0deg, rgba(223, 237, 207, 0.7) 0%, rgba(223, 237, 207, 0.7) 100%),
linear-gradient(180deg, rgba(222, 247, 199, 0.8) 0%, rgba(137, 186, 69, 0.8) 100%);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
border-radius: var(--br) var(--br) 0 0;
}
.product-card__img img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: var(--br) var(--br) 0px 0px;
}
.product-card__bottom {
position: relative;
padding: 25px 30px 30px;
border-radius: 0px 0px var(--br) var(--br);
border: 1px solid #e7eae7;
background: #f5f6f5;
flex-grow: 1;
display: flex;
flex-direction: column;
}
.product-card__title {
color: #767a78;
font: 22px/1.4 var(--font-secondary);
margin-bottom: 25px;
}
.product-card__price {
margin: auto 0 30px;
font-size: 28px;
font-weight: 500;
}
.product-card__btn {
padding: 16px;
width: 100%;
position: relative;
z-index: 1;
font-size: 20px;
letter-spacing: 0.2px;
border-radius: 10px;
background-color: var(--color-green);
border: 1px solid var(--color-green);
color: var(--color-white);
transition: opacity 0.25s;
}
.product-card__btn.hidden {
opacity: 0;
}
.product-card__btn:not(.added):hover {
opacity: 0.7;
}
.product-card__btn::before {
content: "Добавить в корзину";
}
.product-card__btn.added {
border-color: var(--color-green-dark);
color: var(--color-green-dark);
background-color: transparent;
pointer-events: none;
}
.product-card__btn.added::before {
content: "В корзине";
}
@media screen and (max-width: 1440px) {
.catalog {
padding: 135px 0 80px;
}
.products {
margin-top: 65px;
gap: 30px 15px;
}
.products__item {
width: calc((100% - 30px) / 3);
}
}
@media screen and (max-width: 1280px) {
.catalog {
padding: 135px 0 70px;
}
.catalog__top {
flex-direction: column;
align-items: flex-start;
gap: 30px;
}
.products {
margin-top: 45px;
gap: 30px 20px;
}
.products__item {
width: calc(50% - 10px);
}
.product-card__bottom {
padding: 25px;
}
.product-card__title {
font-size: 18px;
margin-bottom: 16px;
}
.product-card__price {
margin: auto 0 30px;
font-size: 24px;
}
.product-card__btn {
font-size: 16px;
padding: 16px;
}
}
@media screen and (max-width: 768px) {
.catalog {
padding: 90px 0 50px;
}
.catalog__filters {
gap: 8px;
}
.catalog__filter-btn {
font-size: 12px;
}
.products {
gap: 30px;
}
.products__item {
width: 100%;
}
.product-card__bottom {
padding: 16px 20px;
}
.product-card__title {
font-size: 14px;
margin-bottom: 12px;
}
.product-card__price {
font-size: 18px;
margin: auto 0 25px;
}
.product-card__btn {
font-size: 14px;
padding: 12px;
}
}