@import "variables.css";

.photoListGrid {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 9fr;
}
.photoList {
    display: grid;
    height: 100%;
    width: 100%;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

.card-link {
    text-decoration: none;
      display: block; /* Ensures the anchor fills the space */
}

.photoSquare:hover {
    background-color: var(--hover-color);
}

.card-link .photoSquare {
    color: var(--text-color);
}

.sidepanel {
    display: block;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(auto-fill, minmax(1fr,50px));
    border: 2px solid var(--border-color);
}

.sidepanel-item {
    width: 100%;
}

.sidepanel-item h3 {
    display: flex;
    justify-content: center;
}

.sidepanel-subline {
      border: none;               /* Removes the default browser border */
      border-top: 2px dashed var(--inner-border-color); /* Sets a 2px dark-gray dashed line */
      margin: 10px 0;             /* Adds vertical spacing above and below */
      width: 100%;
}

.sidepanel-line {
      border: none;               /* Removes the default browser border */
      border-top: 2px solid var(--border-color); /* Sets a 2px dark-gray dashed line */
      margin: 15px 0;             /* Adds vertical spacing above and below */
      width: 100%;
}