.collection-hero {

	position: relative;
	width: 100%;

	.collection-hero__media {

		@media (max-width: 767px) {
			display: none;
		}

		.collection-hero__image {
			width: 100%;
			height: 100%;
			min-height: 500px;
			object-fit: cover;
			object-posiiton: center right;
		}
	}

	.collection-hero__content {

		.breadcrumbs {
			margin: 0 0 30px 0;
		}

		.collection-hero__title {
			margin: 0;
		}

		.collection-hero__description {
			margin: 20px 0 0 0;
			.collection-hero__description-read-more {
				cursor: pointer;
				text-decoration: underline;
			}
		}

		.collection-hero__subcollections {

			display: flex;
			flex-wrap: nowrap;
			gap: 10px;
			margin: 30px -60px 0;
			padding: 0 60px;
			overflow: auto;
			scrollbar-width: none;
			-ms-overflow-style: none;
			width: calc(100% + 120px);
			&::-webkit-scrollbar {
				display: none;
			}

			@media (max-width: 990px) {
				margin: 30px -40px 0;
				padding: 0 40px;
				width: calc(100% + 80px);
				@media (max-width: 768px) {
					margin: 30px -16px 0;
					padding: 0 16px;
					width: calc(100% + 32px);
				}
			}

			.collection-hero__subcollection {
				width: 160px;
				min-width: 160px;
				border: 1px solid var(--border-white);
				border-radius: 4px;
				overflow: hidden;
				background: #151515;
				padding: 5px 5px 10px 5px;
				transition: .3s all;

				@media (max-width: 768px) {
					width: 120px;
					min-width: 120px;
					padding: 4px 4px 10px 4px;
				}

				&:hover {
					border-color: var(--color-primary);
				}

				.collection-hero__subcollection-media {

					.collection-hero__subcollection-image {
						display: block;
						width: 100%;
						height: unset;
						aspect-ratio: 1/1;
						object-fit: cover;
						border-radius: 4px;
					}

				}

				.collection-hero__subcollection-content {

					.collection-hero__subcollection-title {
						text-align: center;
						margin: 10px 0 0 0;
						@media (max-width: 768px) {
							font-size: 16px;
						}
					}

				}

			}

		}

	}

	&.collection-hero--has-image {

		.collection-hero__content {
			position: absolute;
			top: 200px;
			left: 0;
			padding: 0 60px;
			width: 100%;

			@media (max-width: 990px) {
				padding: 0 40px;
			}

			@media (max-width: 768px) {
				padding: 110px 16px 0;
				position: static;
			}

			.collection-hero__title,
			.collection-hero__description {
				max-width: 620px;
			}
		}

	}

	&:not(.collection-hero--has-image) {
		.collection-hero__content {
			position: static;
			width: 100%;
            padding: 200px 60px 20px;
            display: flex;
            flex-wrap: wrap;
            @media (max-width: 990px) {
            	padding: 130px 40px 20px;
            }
            @media (max-width: 768px) {
            	padding: 110px 16px 0;
            }
            .breadcrumbs {
            	width: 100%;
            }
            .collection-hero__title {
            	width: 42%;
            	padding-right: 60px;
            	@media (max-width: 990px) {
            		width: 100%;
            		padding:0;
            		margin: 0 0 10px 0;
            	}
            }
            .collection-hero__description {
            	width: 58%;
            	margin: 0;
            	@media (max-width: 990px) {
            		width: 100%;
            	}
            }
		}
	}

}