<script></script>

<div class="container">
  <div class="highlight eutanasia">
    <picture>
      <source srcset="high-eutanasia-768w.jpg" media="max-width(768px)">
      <source srcset="high-eutanasia.jpg">
      <img srcset="high-eutanasia.jpg" alt="Socias de DMD se manifiestan a favor de la eutanasia">
    </picture>
    <div class="card">
      <div class="text">
        <h2>Ley de Eutanasia</h2>
        <h3>Resuelve tus dudas</h3>
      </div>
    </div>
  </div>

  <div class="highlight testamento-vital">
    <picture>
      <source srcset="high-eutanasia-768w.jpg" media="max-width(768px)">
      <source srcset="high-eutanasia.jpg">
      <img srcset="high-eutanasia.jpg" alt="Socias de DMD se manifiestan a favor de la eutanasia">
    </picture>
    <div class="card">
      <div class="text">
        <h2>Testamento vital</h2>
        <h3>Decide hasta el final</h3>
      </div>
    </div>
  </div>
  <div class="highlight asociate">
    <picture>
      <source srcset="high-eutanasia-768w.jpg" media="max-width(768px)">
      <source srcset="high-eutanasia.jpg">
      <img srcset="high-eutanasia.jpg" alt="Socias de DMD se manifiestan a favor de la eutanasia">
    </picture>
    <div class="card">
      <div class="text">
        <h2>Asóciate a DMD</h2>
        <h3>Ayúdanos a defender tus derechos</h3>
      </div>
    </div>
  </div>
</div>

<style>
  h2 {
    font-size: 2rem;
    text-transform: uppercase;
    font-weight: 800;
    text-align: right;
  }
  h3 {
    font-size: 1.2rem;
    font-weight: 300;
    text-align: right;
  }
  .container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 1rem;
    min-height: 180px;
  }

  .highlight {
    padding: 0;
    color: white;
    box-shadow: 0 0 4px 0px rgba(0,0,0,0.5);
    position: relative;
    overflow: hidden;
  }

  .highlight picture {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 0;
    width: 100%;
  }

  .highlight .card {
    position: absolute;
    display: grid;
    padding: 1rem;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    justify-content: flex-end;
    align-items: flex-end;
  }
  .highlight.eutanasia {
    grid-column: 1/3;
  }
  .highlight.testamento-vital {
    grid-column: 3/4;
  }
  .highlight.asociate {
    grid-column: 4/5;
  }

  .eutanasia .card {
    background: linear-gradient(120deg, #006e7fcc 0%, #006e7fff 100%);
  } 
  .testamento-vital .card {
    background: linear-gradient(120deg, #e08115cc 0%, #e08115 100%);
  }

  .asociate .card {
    grid-column: 4/5;
    background: linear-gradient(120deg, #B30F1Dcc 0%, #B30F1D 100%);
    
  }

  @media (max-width: 768px) {
    .container {
      grid-template-columns: 1fr;
    }
    .highlight.eutanasia, .highlight.testamento-vital, .highlight.asociate {
      grid-column: 1/2;
      margin-left: -8px;
    }
    .highlight {
      height: 100px;
    }
  }
</style>