/* link reset for panel links */
.selection a.brand {
  text-decoration: none;
  color: inherit;
}

/* the row */
.selection{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
}

/* each panel (the <a>) */
.brand{
  flex: 1;                 /* each takes half; grows nicely */
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  transition: flex 0.5s ease; /* smooth expand on hover */
}

/* optional: expand on hover */
.brand:hover { flex: 1.6; }

/* backgrounds */
#Latt{
  background:
    linear-gradient(to left, hsla(0, 4%, 76%, 0.603), hsla(0, 0%, 19%, 0.637)),
    url("../images/Stock/BG solar panels.jpg");
  background-size: cover;
  background-position: center;
}

#HL{
  background:
    linear-gradient(to left, hsla(0, 0%, 0%, 0.603), hsla(0, 0%, 19%, 0.637)),
    url("../images/Stock/code.jpg");
  background-size: cover;
  background-position: center;
}

/* logo block */
.logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 25%;
}
.brand img{
  width: 100%;
  height: auto;
  -webkit-filter: drop-shadow(4px 4px 12px rgba(0, 0, 0, 0.25));
  filter: drop-shadow(4px 4px 12px rgba(0, 0, 0, 0.25));
}
.logo p {
    margin-top: 1rem;
    font-size: 1.2rem;
    color: #fff;
    white-space: nowrap;    /* evita salto de línea */
    overflow: hidden;       /* opcional: corta si no cabe */
    text-overflow: ellipsis; /* opcional: muestra ... si es demasiado largo */
}