.design-gallery {
    display: flex; gap: 1.5em;
    padding: .5em; box-sizing: border-box;
    overflow: hidden;
}

.design-info {
    display: flex; flex-direction: column; gap: .5em;
    width: min(20em, 40%); flex-shrink: 0;
}
.design-info-card {
    overflow: clip;
    padding: .5em; box-sizing: border-box;
    border-radius: .5em;
    display: flex; flex-direction: column;
}
body.light .design-info-card {
    background-color: rgba(255, 255, 255, .55);
    box-shadow: 0 0 1.5em rgba(0, 0, 0, 0.35);
}
body.dark .design-info-card {
    background-color: rgba(0, 0, 0, .55);
    box-shadow: 0 0 1.5em rgba(255, 255, 255, 0.35);
}
.design-info-card.title {
    flex-shrink: 0;
}
.design-info-card:not(.title) {
    flex-grow: 1;
}
.design-info-card > header {
    font-weight: bold; opacity: .85;
    font-size: .85em;
}
.design-info-card.title > header {
    font-size: 1.5em; color: rgb(210, 60, 130); line-height: 1.5em;
}
.design-info-card:not(.title) > header + div {
     margin-top: .5em; line-height: 1.5em;
     overflow: auto;
}
.design-info-card:not(.title) p {
     margin: 0 0 .5em 0;
}

.design-info-link-list {
    display: flex; gap: .25em; margin-top: .5em;
}
.design-info-link-list > a {
    color: inherit; cursor: pointer; font-size: .85em;
}
.design-info-link-list > a > button {
    color: inherit; font-family: inherit; font-size: inherit;
    font-weight: bold;
    border: .2em solid rgb(210, 60, 130);
    height: 1.8em; box-sizing: border-box;
    border-radius: .9em; padding: 0 .5em; cursor: pointer;
    display: flex; gap: .25em; align-items: center;
}

.design-content {
    display: flex; gap: .5em;
    flex-grow: 1;
}

@media (max-width: 35em) {
    .design-gallery {
        display: block;
        overflow: auto;
    }
    .design-info {
        width: 100%;
    }
    .design-info-card:not(.title) > header + div {
         margin-top: .5em; line-height: 1.5em;
         overflow: unset;
    }
    .design-content {
        width: calc(100% - 1em);
        margin: 1.5em .5em .5em .5em;
    }
}