Popsu-coloque/web/themes/custom/popsu_colloque/css/components/hero.scss

body{
  overflow-x: hidden;
}
.home{
  .__img-hero{
    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;
        }
      }
    }
  }
}