body { overflow-x: hidden; } .home .__img-hero { display: none; width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; } .__img-hero { height: 300px; width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; } .__img-hero img { width: 100%; height: 100%; object-fit: cover; } .participant_full { flex-direction: column; margin-top: 2rem; } @media screen and (min-width: 992px) { .participant_full { margin-top: 0rem; } } .participant_full .hero figure { width: 100%; } .participant_full .hero figure .__img > div { margin: auto; width: 250px; height: 250px; } .participant_full .hero figure .__img img { border-radius: 100%; width: 100%; height: 100%; object-fit: cover; } .participant_full .hero figure figcaption { align-self: center; text-align: center; margin: 2rem 0; } @media screen and (min-width: 768px) { .__img-hero { height: 500px; width: auto; position: relative; left: 0; right: 0; margin-left: auto; margin-right: auto; } } @media screen and (min-width: 768px) { .participant_full .hero figure { width: 100%; } .participant_full .hero figure .__img { margin-right: 2rem; } .participant_full .hero figure .__img > div { width: 300px; height: 300px; } .participant_full .hero figure .__img img { border-radius: 100%; width: 100%; height: 100%; object-fit: cover; } .participant_full .hero figure figcaption { align-self: center; text-align: left; } }