@use "../abstracts/variables" as variables;

.firevert-partners {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;

	&__item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border: 1px solid variables.$border-color;
		border-radius: variables.$border-radius-10;
		padding: 50px 33px 25px;
		width: 100%;
		text-decoration: unset;

		@media #{variables.$xl} {
			max-width: unset;
			flex: 1;
		}

		&:hover,
		&:focus {
			box-shadow: unset;
			outline: unset;
			border-color: variables.$primary;
		}
	}

	&__item-content {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 100%;
	}

	&__item-logo {
		display: grid;
		place-items: center;
		margin: 0 auto;

		& > img {
			height: 45px;
			width: auto;
		}
	}

	&__item-description {
		text-align: center;
		color: rgba(0, 0, 0, 0.6);
		margin: 30px auto 30px;
		text-decoration: unset;
		font-size: 15px;
		line-height: 20px;
	}

	&__item-button {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		color: variables.$black;
		text-decoration: unset;
		font-size: 16px;
		line-height: 1;
		font-weight: 600;
		text-decoration: unset;

		& > span {
			display: grid;
			place-items: center;
			width: 22px;
			height: 22px;
			border-radius: variables.$border-radius-circle;
			background-color: variables.$primary;
		}
	}
}