.collection-grid {

	.collection-grid__items {

		display: grid;
		gap: 10px;
		grid-template-columns: repeat(var(--cols-desktop, 5), minmax(0, 1fr));

		@media (max-width: 989px) {
			grid-template-columns: repeat(var(--cols-tablet, 3), minmax(0, 1fr));
		}

		@media (max-width: 749px) {
			grid-template-columns: repeat(var(--cols-mobile, 2), minmax(0, 1fr));
		}

		.collection-grid__item {

			min-width: 0;
			background: var(--color-primary);
			border-radius: 4px;
			overflow: hidden;

			&:hover {
				.collection-grid__link {
					.collection-grid__media {
						.collection-grid__image {
							opacity: .8;
						}
					}
				}
			}

			.collection-grid__link {

				position: relative;

				.collection-grid__media {

					.collection-grid__image {
						width: 100%;
						aspect-ratio: 1/1;
						height: unset;
						object-fit: cover;
						transition: .3s all;
					}

				}

				.collection-grid__content {

					position: absolute;
					bottom: 0;
					left: 0;
					width: 100%;
					padding: 50px 15px 15px 15px;
					display: flex;
					align-items: center;
					gap: 10px;
					background: linear-gradient(
						to top,
						rgba(0, 0, 0, 0.85) 0%,
						rgba(0, 0, 0, 0) 100%
					);

					@media (max-width: 990px) {
						padding: 40px 10px 10px 10px;
						gap: 6px;
					}

					.collection-grid__title {
						margin: 0;
						@media (max-width: 990px) {
							font-size: 16px;
						}
					}

					.collection-grid__arrow {
						svg {
							path {
								fill: #fff;
							}
							@media (max-width: 990px) {
								width: 14px;
								height: unset;
							}
						}
					}

				}

			}

		}

	}

}