.section.collection > .section_body {
    position: relative;
    display: block;
}

.accordion > summary img {
    cursor: pointer;
}

details > summary {
	list-style: none;
}

details > summary::marker,
details > summary::-webkit-details-marker {
    content: "";
    display: none;
}

.accordion > summary img {
	aspect-ratio: 1/1;
    transition: all 0.15s ease-in-out;
    filter: grayscale(0);
	opacity: 1;
}

.accordion[open] > summary img {
    transition: all 0.3s ease-in-out;
    filter: grayscale(1);
	opacity: 0.5;
}

.accordion > summary > p {
    margin: var(--margin) 0;
}

.accordion_close {
    display: none;
}

.accordion_body > .collection_info {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    z-index: 1;
}

.accordion_body > .collection_info > .collection_text > p {
    word-spacing: -0.05em;
}

.accordion_body > .collection_info > .collection_link {
    margin: var(--margin) 0;
	margin-bottom: var(--margin-x2);
    text-align: left;
}

.accordion_body > .collection_info > .collection_link::before,
.accordion_body > .collection_info > .collection_link::after {
	content: ">>>";
	display: inline-block;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
}

.accordion_body > .collection_media {
    display: none;
}

@media (hover:hover) {
	.collection_link {
		transition: opacity 0.3s ease-in-out;
		opacity: 1;
	}

	.collection_link:hover {
		transition: opacity 0.15s ease-in-out;
		opacity: var(--opacity);
	}
}

@media (min-width: 768px) {
    .section.collection {
        padding: 0 var(--margin) 0 0;
    }
}

@media (min-width: 1024px) {
	.section.collection > .section_body {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--margin-d2);
    }

	.accordion {
        padding-bottom: 0px;
    }

    .accordion[open] {
        padding-bottom: calc(var(--opened) + var(--margin-x2));
    }

    .accordion > summary {
        transition: opacity 0.15s ease-in-out;
        opacity: 1;
    }

	.accordion > summary > p {
		margin: var(--margin-d2) 0;
		margin-bottom: 0;
	}

    .accordion[open] > summary {
        pointer-events: none;
        transition: opacity 0.3s ease-in-out;
        opacity: 0;
    }

	/* hide summary when the last item is odd */
	/* https://stackoverflow.com/questions/29770736/select-last-child-when-odd-2-last-childs-when-even */
	.accordion:last-of-type:not(:nth-child(even))[open] > summary {
        height: 0px;
		overflow: hidden;
		transition: none;
		opacity: 1;
    }

    .accordion_body {
        position: absolute;
        width: 100%;
        height: var(--opened);
        margin: var(--margin) 0;
        left: 0;
    }

    .accordion_close {
        display: block;
        position: absolute;
        background: unset;
        border: none;
        margin: var(--margin-d2);
        top: 0;
        right: 0;
        cursor: pointer;
        z-index: 1;
    }

    .accordion_body > .collection_info > .collection_text {
        padding: var(--margin-x2);
    }

    .accordion_body > .collection_info > .collection_link {
        margin: 0;
        text-align: center;
    }

	.accordion_body > .collection_info > .collection_text,
    .accordion_body > .collection_info > .collection_link {
        width: 100%;
        max-width: 600px;
    }

    .accordion_body > .collection_media {
        display: block;
        position: absolute;
        width: calc(50% - var(--margin-d2));
        height: auto;
        z-index: 0;
        top: 0;
        right: 0;
    }

    .accordion_body > .collection_media img {
		aspect-ratio: 1/1;
		opacity: 0.5;
        filter: grayscale(1);
        height: 100%;
    }
}

@media (min-width: 1024px) and (hover:hover) {
	.accordion_close {
		transition: opacity 0.3s ease-in-out;
		opacity: 1;
	}

	.accordion_close:hover {
		transition: opacity 0.15s ease-in-out;
		opacity: var(--opacity);
	}
}

@media (min-width: 1280px) {
	.section.collection > .section_body {
        column-gap: var(--margin);
    }

    .accordion_body > .collection_info > .collection_text,
    .accordion_body > .collection_info > .collection_link {
        max-width: 800px;
    }
}
