/* Detail Page */
.detail-section{
    min-height: calc(100vh - 110px);
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.detail-content{
    background-color: var(--blue);
    display: grid;
    grid-template-columns: 1fr 3fr;
    height: fit-content;
    min-height: calc(100vh - 110px);
    gap: 2px;
}

.detail-content .header {
    padding-top: 1.5em;
    grid-column: span 2;
}
.square {
    border-radius: 0.25rem;
    display: inline-block;
    width: 1rem;
    height: 1rem;
}

.detail-content > *{
    padding: 1em;
    background-color: var(--grey);
}

.detail-content .subtitle{
    font-family: var(--quickSandFont);
    font-size: 1.15em;
    font-weight: bold;
    grid-column: 1;
}

.detail-content .area{
    grid-column: 2;
}

/* Stitch */
.stitch-tag{
    display: flex;
    align-items: center;
}

.stitch-tag > div{
    display: flex;
    align-items: center;
}
.stitch-tag img{
    width: 100%;
    height: auto;
    padding: 0.25em;
}
.stitch-tag p{
    padding: 0.5em;
}
.diagram{
    width: 100%;
    height: auto;
    max-width: 1000px;
}

/* Pattern */
.pattern-tag{
    padding: 0 !important;
    display: flex;
}
.pattern-tag :first-child{
    border-right: 2px solid var(--blue);
    height: 100%;
}
.pattern-tag > *{
    padding: 0.25em;
}

.area:has(.pattern-materials-area){
    padding: 0;
}
.pattern-materials-area{
    display: flex;
    flex-flow: row;
    background-color: var(--blue);
    gap: 0.15em;
    width: 100%;
    height: 100%;
}
    .pattern-materials-area > .cell {
        flex-grow: 1;
        background-color: var(--grey);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.25em;
        width: 150px;
    }

    .pattern-materials-area :last-child{
        border: 0;
    }

@media only screen and (max-width: 900px) {
    .pattern-materials-area{
        flex-wrap: wrap;
    }
    .pattern-materials-area > .cell{
        padding: 0.5em;
        
    }
}
@media only screen and (max-width:580px) {
    .detail-content .subtitle {
        grid-column: span 2;
        padding: 0.25em;
    }
    .detail-content .area {
        grid-column: span 2;
    }
    .detail-content .subtitle{
        background-color: var(--grey-medium);
        
    }
}