/**/
/* Highlights */
/**/

#highlights .highlights__container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
}

.highlights__container .highlights {
    flex: 1 1 30%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: .5rem;
}

.highlights__container .highlights button {
    padding: 1rem;
    flex: 1 1 40%;
    transition: transform 150ms ease, border-color 150ms ease;
}

.highlights__container .highlights button:active,
.highlights__container .highlights button:focus {
    background-color: var(--clr-highlight-hover);
    border-color: white;
}

.highlights__container .writeup {
    flex: 1 1 50%;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

    .highlights__container .writeup .image-desc {
        flex-direction: column;
        gap: 1rem;
    }

.highlights__container .writeup .image-desc .stack {
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
}

.highlights__container .writeup .image-desc .stack h2 {
    text-align: center;
}

.highlights__container .writeup .card {
    width: 8rem;
    height: 8rem;
/*    background-color: var(--clr-primary);
    border: .15rem solid var(--clr-primary-border);
    border-radius: 50%;*/
/*    margin-right: 2rem;*/
    padding: .5rem;
}

.highlights__container .writeup .card .image {
    width: 100%;
    height: 100%;
    margin-right: unset;
}

.highlights__container .writeup .divider {
    background-color: var(--clr-primary);
}



/**/
/* Details Specifications */
/**/

#details .section-title {
}

.details__container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 1rem;
    margin-block: 1rem;
}

#details .details__tables-container {
    display: flex;
    flex-direction: column;
    flex: 1 1 75%;
}

#details .details__tables-container > * {
    flex: 1;
}

.details__table {
    display: flex;
}

.details__table__specs {
    display: flex;
    flex-direction: column;
    flex: 1;
}

#details .details__table .legend {
    display: flex;
    padding: .5em;
}

#details .details__table .legend > * {
    flex: 1 1 50%;
}

#details .details__table .row {
    display: flex;
    gap: 1em;
    padding: .5em;
}

#details .details__table .row:nth-child(2n+1) {
    background-color: #1F2320;
}

#details .details__table .row > * {
    flex: 1 1 50%;
}

.details__dimensions {
    margin-bottom: 1rem;
    padding: 1rem;
}

.details__footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.details__footer .button.toggler {
    height: 3rem;
}



/**/
/* Attachments Available */
/**/

#attachments .attachments__container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1em;
    margin-block: 1rem;
}

#attachments .attachments__highlights-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1em;
    margin-block: 1rem;
}

.attachment {
    flex: 1 1 40%;
    display: flex;
    flex-direction: column;
}

.attachment .image-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 10rem;
}

.attachment .image-container .img-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-color: #F4F3F3;
}

.attachment .image-container .img-wrapper img {
    object-fit: contain;
    object-position: center;
}

.attachment .info {
    display: flex;
    flex-direction: column;
    gap: .5em;
    padding: 1em;
}

.attachments__container .attachment {
    flex: 1 1 15%;
    min-width: 10rem;
}

.attachments__container .attachment .subtitle {
    display: none;
}

.attachments__container .attachment .image-container {
    height: 7rem;
}



/**/
/* Large Screens */
/**/

@media only screen and (min-width: 750px) {

    .highlights__container .writeup .image-desc {
        flex-direction: row;
        gap: 1rem;
    }

    .highlights__container .writeup p {
        min-height: 10rem;
    }

    .attachment {
        flex: 1 1 30%;
    }

    #details .details__tables-container {
        min-width: 40rem;
    }

    .details__footer {
        align-items: stretch;
    }

    #highlights .highlights__container {
        flex-direction: row;
        flex-wrap: wrap;
    }

    #attachments .attachments__container {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .attachments__container .attachment {
        max-width: 25%;
    }
}



/* desktop hover effects */

@media (hover: hover) and (pointer: fine) {

    .highlights__container .highlights button:hover {
        background-color: var(--clr-highlight-hover);
        border-color: white;
        color: white;
    }
}


/* Phone tap animations */

@media (hover: none) and (pointer: coarse) {

    .highlights__container .highlights button:active {
        transform: scale(0.96);
    }
}