.viewer-attachments__layout {
    display: flex;
    gap: 0.5rem;
}

.viewer-attachments__layout--portrait {
    flex-direction: row;
}
.viewer-attachments__layout--landscape {
    flex-direction: column;
}

.viewer-attachments__grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

.viewer-attachments__main, .viewer-attachments__item {
    display: block;
}

.viewer-attachments__main {
    aspect-ratio: var(--viewer-attachments-aspect);
}

.viewer-attachments__item > img {
    height: 20rem;
}

.viewer-attachments__thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
}