.banner-listagem {
	background-color: var(--color-block-gray);
}

.listing {
	height: 250px;
	overflow: hidden;
	border-radius: 4px;
}

.collection-banner {
	background-repeat: no-repeat;
	background-position: center;
	background-origin: center;
	background-size: 100%;
	width: 100%;
	height: 100%;
	border-radius: 4px;
	transition: background-size 0.5s;
}

.collection-banner:hover {
	background-size: 110%;
}

.collection-banner .contain-banner {
	-webkit-box-pack: start;
	-ms-flex-pack: start;
	align-items: start;
	top: 0;
	width: 40%;
	height: 250px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	padding-left: 57px;
	flex-direction: column;
	justify-content: center;
}

.filter-variation {
	padding: 8px 12px;
}

.dropdown-variation-attribute {
	background-color: #f5f5f5;
	position: absolute;
	z-index: 100;
	padding: 15px 20px;
	flex-direction: row;
	gap: 30px;
	max-height: 305px;
	display: none;

	.attribute {
		display: flex;
		flex-direction: column;
		width: max-content;

		.title {
			font-weight: 700;
			font-size: 16px;
			line-height: 20px;
			color: #545a57;
			font-family: var(--text-font);
			margin-bottom: 16px;
		}

		.options {
			overflow-y: auto;

			.option {
				margin-bottom: 8px;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				gap: 5px;

				.span {
					background-color: transparent;
					height: 18px;
					width: 18px;
					border: 1.5px solid transparent;
					border-color: var(--primary-color);
					border-radius: 30%;
					cursor: pointer;
					display: inline-flex;
					justify-content: center;
					align-items: center;

					.i {
						font-size: 10px;
						margin: 0px;
						padding: 0px;
					}
				}

				.label {
					font-family: var(--text-font);
					font-weight: 400;
					font-size: 18px;
					line-height: 22.5px;
					cursor: pointer;
				}
			}
		}
	}
}

.dropdown-variation-attribute.active {
	display: flex;
}