undea

by Torwan

HTML

<div class="lpd-section-4-flex">
  <div class="lpf-img-3 twh">
    <a target="_blank" href="https://www.lancerto.com/pl/marynarka-costa-blanca-ma092221000005-granat.html" style="background-image: url('https://picsum.photos/300/300?random=1');"></a>
  </div>
  <div class="lpf-img-4">
    <div>2</div>
    <div>2</div>
  </div>
  <div class="lpf-img-5">
    <a target="_blank" href="https://www.lancerto.com/pl/koszula-siberia-ko092221000005-granat.html">3</a>
    <a target="_blank" href="https://www.lancerto.com/pl/koszula-siberia-ko092221000005-granat.html">3</a></div>
</div>

<div class="lpd-section-4-flex">
  <div class="lpf-img-4">
    <div>2</div>
    <div>2</div>
  </div>
  <div class="lpf-img-3 twh">
    <a target="_blank" href="https://www.lancerto.com/pl/marynarka-costa-blanca-ma092221000005-granat.html" style="background-image: url('https://picsum.photos/300/300?random=1');"></a>
  </div>
  <div class="lpf-img-5">
    <a target="_blank" href="https://www.lancerto.com/pl/koszula-siberia-ko092221000005-granat.html">3</a>
    <a target="_blank" href="https://www.lancerto.com/pl/koszula-siberia-ko092221000005-granat.html">3</a></div>
</div>

<div class="lpd-section-4-flex">
  <div class="lpf-img-3 twh">
    <a target="_blank" href="https://www.lancerto.com/pl/marynarka-costa-blanca-ma092221000005-granat.html" style="background-image: url('https://picsum.photos/300/300?random=1');"></a>
  </div>
  <div class="lpf-img-4">
    <div>2</div>
    <div>2</div>
  </div>
  <div class="lpf-img-5">
    <a target="_blank" href="https://www.lancerto.com/pl/koszula-siberia-ko092221000005-granat.html">3</a>
    <a target="_blank" href="https://www.lancerto.com/pl/koszula-siberia-ko092221000005-granat.html">3</a></div>
</div>

SCSS

.lpd-section-4-flex {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: flex-start;
  align-content: stretch;
  align-items: baseline;
  height: auto;
  position: relative;
  
  & div[class*="lpf-img-"] {
    display: flex;
    order: 0;
    flex: 0 1 auto;
    align-self: stretch;
    position: relative;
    padding: 12px;
    width: calc(33.3333333333% - 24px);
      flex-wrap: wrap;
      justify-content: flex-start;
      align-content: stretch;
      align-items: baseline;
    
    
    & > div, & > a {
      order: 0;
      flex: 0 1 100%;
      align-self: stretch;
      display: flex;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      background-image: url('https://picsum.photos/300/300?random=1');
      
      &::after {
        content: "";
        display: block;
        padding-bottom: 100%;
      }
      
      &:nth-child(2) {
        margin-top: 24px;
      }

    }
    
  }
}

@media only screen and (max-width: 768px) {
  .lpd-section-4-flex {
    & div[class*="lpf-img-"] {
      &:nth-child(1) {
      width: calc(50% - 24px);
    }
    &:nth-child(2) {
      width: calc(50% - 24px);
    }
    &:nth-child(3) {
      width: calc(100% - 24px);
    }
    }
  }
}