Responsive landing page using CSS flexbox.

Hi Mariano Alvarez, congrats on your work.

It's a bit tricky to make the svg change color when hovered. I guess you can remove the img tag and replace it with the svg tag itself.

<div class="footer__social">
	...
	<a href="#" class="footer__media">
		<svg class="footer__icon" ...>
			<path .../>
		</svg>
	</a>
	...
</div>

then you can select the path in sass to change the fill color.

footer__media:hover {
	& > svg > path {
		fill: hsl(176, 68%, 64%);
		}
	}
}

And if I may add, make sure the img tag has the alt attribute, but if the image is used for decoration, use the empty alt value <img src="..." alt="" />

To use the <section> tag you must include the heading tag inside the <h1> - <h6>. If you want to wrap an element, use the meaningless <div> tag

<div class="footer__container container">
	<figure class="footer__picture">
		<img src="./images/logo.svg" class="footer__img">
	</figure>

	<div class="footer__links">
		<a href="#" class="footer__link">FAQs</a>
		<a href="#" class="footer__link two">Contact Us</a>
		<a href="#" class="footer__link">Privacy Policy</a>
		<a href="#" class="footer__link four">Press Kit</a>
		<a href="#" class="footer__link">Install Guide</a>
	</div>
</div>

<div class="brands container">
	<img src="./images/logo-google.png" class="brands__item">
	<img src="./images/logo-ibm.png" class="brands__item">
	<img src="./images/logo-microsoft.png" class="brands__item">
	<img src="./images/logo-hp.png" class="brands__item">
	<img src="./images/logo-vector-graphics.png" class="brands__item">
</div>

You can do the same with other tags.

And lastly, I don't see the background as it is in the design, try to add it.