```css id="r2lf7p"
/* =========================================
   TODO TEATRO - CARTELERA FINAL
========================================= */

.view-cartelera .views-list{

  display:flex;

  flex-direction:column;

  gap:58px;
}


/* =========================================
   TARJETA
========================================= */

.view-cartelera .views-list .views-row{

  display:grid !important;

  grid-template-columns:320px 1fr !important;

  grid-template-areas:
    "imagen titulo"
    "imagen ciudad"
    "imagen fecha"
    "imagen sala"
    "imagen direccion"
    "imagen cuerpo";

  column-gap:32px;

  row-gap:10px;

  align-items:start;

  background:#071133 !important;

  border-radius:26px;

  padding:26px;

  box-shadow:0 8px 28px rgba(0,0,0,.22);

  overflow:hidden;

  margin-bottom:58px !important;
}


/* =========================================
   IMAGEN
========================================= */

.view-cartelera .views-field-field-imagen{

  grid-area:imagen;

  width:100%;
}

.view-cartelera .views-field-field-imagen img{

  width:100%;

  max-width:320px;

  max-height:420px;

  object-fit:cover;

  border-radius:18px;

  display:block;
}


/* =========================================
   TITULO
========================================= */

.view-cartelera .views-field-title:first-of-type{

  grid-area:titulo;

  font-size:2rem;

  font-weight:700;

  line-height:1.1;

  margin:0;
}

.view-cartelera .views-field-title:first-of-type a{

  color:#ff4f7b;

  text-decoration:none;
}


/* =========================================
   CIUDAD
========================================= */

.view-cartelera .views-field-field-ciudad{

  grid-area:ciudad;

  display:inline-block;

  background:#ffd54a;

  color:#3f2d00;

  width:max-content;

  padding:8px 14px;

  border-radius:999px;

  font-size:.9rem;

  font-weight:800;

  letter-spacing:1.5px;

  text-transform:uppercase;
}


/* =========================================
   FECHA
========================================= */

.view-cartelera .views-field-field-funciones{

  grid-area:fecha;

  color:#cccccc;

  font-style:italic;

  font-size:1rem;
}


/* =========================================
   SALA
========================================= */

.view-cartelera .views-field-title-1{

  grid-area:sala;

  font-size:1.25rem;

  font-weight:700;
}

.view-cartelera .views-field-title-1 a{

  color:#ffffff;

  text-decoration:none;
}


/* =========================================
   DIRECCION
========================================= */

.view-cartelera .views-field-field-direccion{

  grid-area:direccion;

  color:#bbbbbb;

  font-style:italic;
}


/* =========================================
   CUERPO
========================================= */

.view-cartelera .views-field-body{

  grid-area:cuerpo;

  color:#eeeeee;

  line-height:1.75;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width:768px){

  .view-cartelera .views-list .views-row{

    grid-template-columns:1fr !important;

    grid-template-areas:
      "titulo"
      "imagen"
      "ciudad"
      "fecha"
      "sala"
      "direccion"
      "cuerpo";

    gap:14px;

    padding:14px;

    border-radius:20px;
  }

  .view-cartelera .views-field-title:first-of-type{

    text-align:center;

    font-size:1.45rem;
  }

  .view-cartelera .views-field-field-imagen img{

    width:100%;

    max-width:100%;

    max-height:260px;
  }

  .view-cartelera .views-field-field-ciudad{

    margin:0 auto;
  }

  .view-cartelera .views-field-field-funciones,

  .view-cartelera .views-field-title-1,

  .view-cartelera .views-field-field-direccion{

    text-align:center;
  }

}
```