Responsive centered image

A.Responsive centered image.md

Responsive centered image

altenative.html

<div class="wrapper">
  <div class="stretched-out">
    <img src="" />
  </div>
</div>

alternative.css

.wrapper {
  padding: 32px;
}

.stretched-out {
  margin-left: -32px;
  margin-right: -32px;
}

.img {
  display: block;
  width: 100%;
}

index.html.erb

<div class="page-wrapper sm-contact">
  <section class="index">
    
    <%# Top banner: Our stores %>
    <article class="id-banner">
      <div class="sm-picture">
        <span><%= image_tag "https://surmesur-production.s3.amazonaws.com/static/stores/cover_compress.jpg" %></span>
      </div>

      <div class="sm-description">
        <h2 class="sm-description__title">Our Showrooms</h2>
        <p class="sm-description__content">
         Voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo 
         inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. 
         Voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore 
         veritatis et quasi architecto beatae vitae dicta sunt, explicabo. 
        </p> 
      </div>
    </article>

    <%# Filters %>
    <%= render partial: "contact/shared/store_filters" %>
    
    <%# Stores grid %>
    <main class="stores">

      <% @boutiques.reorder('name').each do |b| %>
        <%= render partial: "contact/shared/store_card", locals: { boutique: b } %>
      <% end %>

    </main>

  </section>
</div>

index.scss

// Surmesur contact page revamp 2021
.sm-contact{
  --gap: 5rem;

  min-height: calc(100% - 10rem);
  font-family: 'Montserrat', sans-serif;
  color: black;

  .index {
    width: 100%;

    .id-banner {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      height: 55vh;
      background-color: $light-gray-background;
      padding: 7rem 0;

      .sm-picture {
        overflow: hidden;
        max-height: 100%;
        width: calc(100% - var(--gap));

        span {
          display: flex;
          height: 100%;
          align-items: center;

          img {
            max-width: 100%;
            object-fit: cover;
          }
        }
      }

      .sm-description {
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100%;
        padding-left: 2rem;
        padding-right: calc((100vw - 940px) * 0.5 + var(--gap));

        &__title {
          font-weight: 600;
          font-size: 44px;
          line-height: 68px;
          letter-spacing: 0.39px;
          margin-bottom: 3rem;
        }

        &__content {
          font-weight: 500;
          font-size: 12px;
          line-height: 21px;
          letter-spacing: 0.28px;
        }
      }
    }


    .controls {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-gap: var(--gap);


      @media (min-width: $screen-md-min) {
        max-width: $sm-website-wrapper;
        margin: 2rem auto;
      }

      &__wrapper {
        display: flex;
        justify-content: space-between;
        grid-column-start: 2;

        span.select2 {
          width: 45% !important;
        }

        .select2-selection--single {
          display: inline-flex;
          align-items: center;
          width: 100%;
          border-color: $gray-border;
        }

        .select2-selection__arrow::after {
          color: black;
        }

        .select2-selection__rendered {
          font-weight: 500;
          font-size: 14px;
          line-height: 18px;
          letter-spacing: normal;
          color: black;
        }
      }
    }

    .stores {
      display: grid;
      justify-items: center;
      grid-template-columns: repeat(2, 1fr);
      grid-gap: var(--gap);
      width: 100%;

      @media (min-width: $screen-md-min) {
        max-width: $sm-website-wrapper;
        margin: 0 auto var(--gap) auto;
      }
    }

    .store-item {
      position: relative;
      padding: 40px;
      border: 1px solid $gray-border;
      box-shadow: 0px 0px 10px 0px $gray-lighter;
      transition: all 0.3s ease-in;

      &:hover,
      &:active {
        border-color: #979797;
      }

      &__title {
        font-weight: 600;
        font-size: 30px;
        line-height: 37px;
        letter-spacing: 0.94px;
      }
      
      &__address {
        padding: 1rem 0;
        font-size: 12px;
        line-height: 22px;
        letter-spacing: 0.38px;

        address:first-child {
          margin: 0;
          font-size: inherit;
          line-height: inherit;
          letter-spacing: inherit;
  
          font-weight: 600;
        }
        
        p:last-child {
          font-weight: 400;

          a {
            color: inherit !important;
          }
        }
      }

      &__hours {
        display: inline-flex; 
        padding: 0 0 1rem 0;
        list-style: none;
        font-weight: 600;
        font-size: 10px;
        line-height: 20px;
        letter-spacing: 0.31px;
      }

      &__appointment {
        z-index: 100;
        width: 80%;
        padding: 15px 50px;
        color: black;
        background-color: #E3E3E3;
        text-transform: uppercase;
        transition: all 0.3s ease-in;

        &:hover {
          background-color: black;
          color:white;
        }
      }
    }
  }

  .show {

  }
}