.shop-categories {
    padding: 32px 0 120px;
}

.shop-categories__grid {
    display:               grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap:                   24px;
    margin-top:            28px;
}

.shop-categories__tile {
    position:        relative;
    display:         block;
    aspect-ratio:    461 / 300;
    overflow:        hidden;
    border-radius:   20px;
    color:           var(--text-inverse);
    background:      var(--neutral-100);
    text-decoration: none;
}

.shop-categories__tile::before {
    content:    '';
    position:   absolute;
    inset:      0;
    z-index:    1;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .72) 100%);
}

.shop-categories__image {
    display:    block;
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.shop-categories__tile:hover .shop-categories__image {
    transform: scale(1.05);
}

.shop-categories__label {
    position:        absolute;
    right:           16px;
    bottom:          16px;
    left:            16px;
    z-index:         2;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             12px;
    min-height:      28px;
}

.shop-categories__name {
    font-size:   15px;
    line-height: 1.2;
    font-weight: 600;
}

.shop-categories__label .icon {
    transition: transform var(--transition);
}

.shop-categories__tile:hover .shop-categories__label .icon {
    transform: translateX(3px);
}

@media (max-width: 1023px) {
    .shop-categories { padding-bottom: 80px; }
    .shop-categories__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}

@media (max-width: 767px) {
    .shop-categories { padding: 20px 0 64px; }
    .shop-categories__grid { grid-template-columns: 1fr; gap: 16px; margin-top: 20px; }
}