custom-footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-block: 4.67em 1em;
	text-align: center;
	font-size: 1.2rem;

	@media (max-width: 500px) {
		font-size: 1.5rem;
	}

	a {
		font-weight: 100;
		text-decoration: none;
		color: inherit;
		transition: .3s;

		&[href]:hover {
			font-weight: 200;
		}
	}

	#footer-companies {
		position: relative;
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
		gap: 1.4em;
		margin-bottom: 4.67em;
		padding-block: 3rem;

		&::before,
		&::after {
			content: '';
			height: 1px;
			background: var(--red);
			position: absolute;
			width: 0;
			transition: width 2s ease;
		}

		&::before {
			inset: 0;
		}

		&::after {
			right: 0;
			bottom: 0;
		}

		>div {
			display: flex;
			flex-direction: column;

			>div {
				font-weight: 500;
				margin-bottom: .467em;
			}
		}
	}

	&:hover {
		#footer-companies {

			&::before,
			&::after {
				width: 100%;
			}
		}
	}

	>img {
		display: block;
		border-radius: 0;
		height: 1.575em;
		justify-self: center;
		align-self: center;
		margin-bottom: 2.33em;
	}

	>.data {
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: .9em;
		font-weight: 100;
		line-height: 1.5;
		margin-bottom: .93em;

		>* {
			text-decoration: none;
			color: inherit;
		}

		>.social-media {
			display: flex;
			justify-content: center;
			gap: .467em;
			height: 2em;
			margin-top: 1rem;

			>a {
				position: relative;
				aspect-ratio: 1;
				background: none;
				border-radius: 5px;
				height: 100%;
				box-sizing: border-box;
				padding: .25em;
				cursor: pointer;

				&::after {
					display: inline-block;
					position: relative;
					content: '';
					width: 100%;
					height: 100%;
					background: var(--red);
				}

				&.facebook::after {
					mask-image: url(/icons/facebook.svg);
				}

				&.linkedin::after {
					mask-image: url(/icons/linkedin.svg);
				}

				&.instagram::after {
					mask-image: url(/icons/instagram.svg);
				}
			}
		}
	}
}