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{ width:100%; height: 100%; object-fit: cover; } } .participant_full{ flex-direction: column; margin-top: 2rem; @media screen and (min-width: 992px) { margin-top: 0rem; } .hero{ figure{ width:100%; .__img{ &> div{ margin: auto; width: 250px; height: 250px; } img{ border-radius: 100%; width: 100%; height: 100%; object-fit: cover; } } 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%; .__img{ margin-right: 2rem; &> div{ width: 300px; height: 300px; } img{ border-radius: 100%; width: 100%; height: 100%; object-fit: cover; } } figcaption { align-self: center; text-align: left; } } } } }