CodePen Embed - pure css accordion with radio buttons

<body>
	<main>
		<h1 class="head">Cthulhu Codewars</h1>
		<ul class="item-list">
			<li class="item1">
				<input type="radio" name="point" id="slide1" checked>
				<label for="slide1" class="label">
					<h4>Codewars call to me,<br>
						Challenging my skills to slay<br>
						Cthulhu with code.</h4><span class="control"></span>
					<div class="slider ">
						<img sizes="(max-width: 589px) 100vw" srcset="
                        https://lidachk.github.io/cssBayan/cssBayan/assets/item1_s0nms6_c_scale,w_320.png 320w,
                        https://lidachk.github.io/cssBayan/cssBayan/assets/item1_s0nms6_c_scale,w_469.png 469w,
                        https://lidachk.github.io/cssBayan/cssBayan/assets/item1_s0nms6_c_scale,w_589.png 589w" src="https://lidachk.github.io/cssBayan/cssBayan/assets/item1_s0nms6_c_scale,w_589.png" alt="slay Cthulhu with code" />
					</div>
				</label>
			</li>
			<li class="item2">
				<input type="radio" name="point" id="slide2">
				<label for="slide2" class="label">
					<h4>Cthulhu lurks deep down,<br>
						Codewars my weapon to fight,<br>
						Code my mighty shield.</h4><span class="control"></span>
					<div class="slider ">
						<img sizes="(max-width: 589px) 100vw" srcset="
                        https://lidachk.github.io/cssBayan/cssBayan/assets/item2_adicjm_c_scale,w_320.png 320w,
                        https://lidachk.github.io/cssBayan/cssBayan/assets/item2_adicjm_c_scale,w_468.png 468w,
                        https://lidachk.github.io/cssBayan/cssBayan/assets/item2_adicjm_c_scale,w_589.png 589w" src="https://lidachk.github.io/cssBayan/cssBayan/assets/item2_adicjm_c_scale,w_589.png" alt="Code my mighty shield" />
					</div>
				</label>
			</li>
			<li class="item3">
				<input type="radio" name="point" id="slide3">
				<label for="slide3" class="label">
					<h4>Code challenges rise,<br>
						With Cthulhu's tentacles,<br>
						Codewars my fortress.</h4><span class="control"></span>
					<div class="slider ">
						<img sizes="(max-width: 589px) 100vw" srcset="
                        https://lidachk.github.io/cssBayan/cssBayan/assets/item3_qsf05m_c_scale,w_320.png 320w,
                        https://lidachk.github.io/cssBayan/cssBayan/assets/item3_qsf05m_c_scale,w_468.png 468w,
                        https://lidachk.github.io/cssBayan/cssBayan/assets/item3_qsf05m_c_scale,w_589.png 589w" src="https://lidachk.github.io/cssBayan/cssBayan/assets/item3_qsf05m_c_scale,w_589.png" alt=" Cthulhu's tentacles" />
					</div>
				</label>
			</li>
			<li class="item4">
				<input type="radio" name="point" id="slide4">
				<label for="slide4" class="label">
					<h4>
						Codewars and Cthulhu,<br>
						Strange bedfellows in the night,<br>
						Code warriors unite.</h4><span class="control"></span>
					<div class="slider ">
						<img sizes="(max-width: 589px) 100vw" srcset="
                        https://lidachk.github.io/cssBayan/cssBayan/assets/item4_tegqz2_c_scale,w_320.png 320w,
                        https://lidachk.github.io/cssBayan/cssBayan/assets/item4_tegqz2_c_scale,w_468.png 468w,
                        https://lidachk.github.io/cssBayan/cssBayan/assets/item4_tegqz2_c_scale,w_589.png 589w" src="https://lidachk.github.io/cssBayan/cssBayan/assets/item4_tegqz2_c_scale,w_589.png" alt=" Codewars and Cthulhu" />
					</div>
				</label>
			</li>
			<li class="item5">
				<input type="radio" name="point" id="slide5">
				<label for="slide5" class="label">
					<h4>Mad skills on display<br>
						Cthulhu's code no match for me<br>
						Victory is mine</h4><span class="control"></span>
					<div class="slider ">
						<img sizes="(max-width: 589px) 100vw" srcset="
                        https://lidachk.github.io/cssBayan/cssBayan/assets/item5_smyiw6_c_scale,w_320.png 320w,
                        https://lidachk.github.io/cssBayan/cssBayan/assets/item5_smyiw6_c_scale,w_468.png 468w,
                        https://lidachk.github.io/cssBayan/cssBayan/assets/item5_smyiw6_c_scale,w_589.png 589w" src="https://lidachk.github.io/cssBayan/cssBayan/assets/item5_smyiw6_c_scale,w_589.png" alt="Cthulhu's code no match for me" />
					</div>
				</label>
			</li>
		</ul>
	</main>
</body>

</html>

@import url("https://fonts.googleapis.com/css2?family=BIZ+UDGothic&display=swap");

:root {
	--color-one: #130e23;
	--color-two: #364b44;
	--text-color: #c2e6ef;
	--mem-width: min(38em, calc(100vw - 4em));
	--mem-height: min(36em, calc(100vw - 6em));
	--slide-duration: 0.9s;
	--text-duration: 0.9s;
	--text-l-height: 1.5em;
	--lbg: "https://lidachk.github.io/cssBayan/cssBayan/assets/lbg370.png";
	--lbg-50: "https://lidachk.github.io/cssBayan/cssBayan/assets/lbg50.png";
}

* {
	box-sizing: border-box;
}

ul {
	padding: 0;
	list-style: none;
}

body,
h1,
h4,
p,
ul,
ol,
li {
	margin: 0;
}

* {
	margin: 0;
}

body {
	font-family: "BIZ UDGothic", sans-serif;
	min-height: 100vh;
	scroll-behavior: smooth;
	text-rendering: optimizeSpeed;
	line-height: 1.5;

	color: var(--text-color);

	background-color: #140f22;
	background-image: url("https://lidachk.github.io/cssBayan/cssBayan/assets/lbg_317.png"),
		url("https://lidachk.github.io/cssBayan/cssBayan/assets/filter.svg"),
		linear-gradient(90deg, #261947, #63339c, #140f22);
	background-repeat: no-repeat, repeat, repeat;
	background-position: 0% 100%, 0 0, center;
	background-blend-mode: lighten;
	background-attachment: fixed;
	background-size: 100vmin, auto, auto;
	animation: start1 2s ease-in-out;
}

@keyframes start {
	0% {
		background-blend-mode: color-burn;
	}
	50% {
		background-blend-mode: darken;
	}
	100% {
		background-blend-mode: lighten;
	}
}
@keyframes start1 {
	0% {
		background-position: -100% 0, 0 0, center;
	}
	100% {
		background-position: 0 100%, 0 0, center;
	}
}

input,
button,
textarea,
select {
	font: inherit;
}

main {
	margin: 1em auto;
	width: var(--mem-width);
	max-width: 100%;
	font-size: 0.7rem;
}

.head {
	display: block;
	width: 100%;
	height: auto;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	margin: 1em 0;
	text-transform: uppercase;
	text-align: center;
	text-transform: uppercase;
}

ul.item-list {
	max-width: var(--mem-width);
	margin: 0 auto;
}

img {
	max-width: 100%;
}

img[width][height] {
	height: auto;
}

/* Let SVG scale without boundaries */
img[src$=".svg"] {
	width: 100%;
	height: auto;
	max-width: none;
}

input {
	display: none;
}

label {
	width: 100%;
	/*   display: flex;
  flex-direction: row;
  flex-wrap: wrap; */
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-rows: auto auto;
	grid-template-areas: "h4 control" "img img";
	margin-bottom: 1em;
	border-radius: 0.5em;
	background-color: #45186b;
	transition: all 0.35s ease-in-out;
	padding: 0.5em;
}

label > h4 {
	height: var(--text-l-height);
	overflow: hidden;
	/*   text-overflow: ellipsis;
  animation: text-hide var(--text-duration) ease-in-out; */
	transition: height var(--text-duration) ease-in-out;
	grid-area: h4;
}

label > .control {
	grid-area: control;
}

label > .slider {
	grid-area: img;
}

.slider {
	margin-top: 1em;
	overflow: hidden;
	transition: all var(--slide-duration);
	height: 0;
}

input:checked + label > .slider {
	/*  animation: details-show var(--slide-duration) ease-in-out; */
	transition: height var(--slide-duration) ease-in-out;
	height: var(--mem-height);
}

input:checked + label > h4 {
	height: calc(var(--text-l-height) * 3);
	/* animation: text-show var(--text-duration) ease-in-out; */
	transition: height var(--text-duration) ease-in-out;
}

input:not(:checked) + label > .slider {
	/* animation: details-hide var(--slide-duration) ease-in-out; */
	transition: height var(--slide-duration) ease-in-out;
	height: 0;
}

.control {
	display: block;
	width: var(--text-l-height);
	height: var(--text-l-height);
	background: url(https://lidachk.github.io/cssBayan/cssBayan/assets/control.svg);
	filter: invert(1%) sepia(42%) saturate(1672%) hue-rotate(167deg)
		brightness(101%) contrast(87%);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;

	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;

	opacity: 0;
}

input:checked ~ label > .control {
	transform: rotate(-1.5turn);
	-webkit-transform: rotate(-1.5turn);
	-moz-transform: rotate(-1.5turn);
	-ms-transform: rotate(-1.5turn);
	-o-transform: rotate(-1.5turn);
}

@keyframes details-show {
	0% {
		height: 0;
	}

	100% {
		height: var(--mem-height);
	}
}

@keyframes details-hide {
	0% {
		height: var(--mem-height);
	}

	100% {
		height: 0;
	}
}

@keyframes text-show {
	0% {
		height: var(--text-l-height);
	}

	100% {
		height: calc(var(--text-l-height) * 3);
	}
}

@keyframes text-hide {
	0% {
		height: calc(var(--text-l-height) * 3);
	}

	100% {
		height: var(--text-l-height);
	}
}

@keyframes glow {
	0% {
		filter: drop-shadow(0 -0.2em 0.5em #5ed8d8);
	}

	100% {
		filter: drop-shadow(0 -0.2em 0.8em #5ed8d8);
	}
}

.label:active > .control,
.label:active {
	opacity: 1;
	animation: 0.9s glow ease-in-out infinite alternate;
}

@media (hover: hover) {
	li,
	label {
		cursor: pointer;
	}

	input:not(:checked) + label:hover > .slider {
		/* animation: details-show var(--slide-duration) ease-in-out; */
		transition: height var(--slide-duration) ease-in-out;
		height: var(--mem-height);
	}

	input:not(:checked) + label:not(:hover) > .slider {
		/* animation: details-hide var(--slide-duration) ease-in-out; */
		transition: height var(--slide-duration) ease-in-out;
		height: 0;
	}

	input:not(:checked) + label:hover > h4 {
		/* animation: text-show var(--text-duration) ease-in-out; */
		transition: height var(--text-duration) ease-in-out;
		height: calc(var(--text-l-height) * 3);
	}

	input:not(:checked) + label:not(:hover) > h4 {
		/* animation: text-hide var(--text-duration) ease-in-out; */
		transition: height var(--text-duration) ease-in-out;
		height: var(--text-l-height);
	}

	ul:hover .control {
		opacity: 1;
	}

	input:not(:checked) + label:hover > .control {
		transform: rotate(1.25turn);
		-webkit-transform: rotate(1.25turn);
		-moz-transform: rotate(1.25turn);
		-ms-transform: rotate(1.25turn);
		-o-transform: rotate(1.25turn);
		filter: drop-shadow(0 -0.2em 0.5em #5ed8d8);
	}
}

@media all and (min-width: 820px) and (max-width: 1022px) {
	/*tablet*/
	body {
		background-image: url("https://lidachk.github.io/cssBayan/cssBayan/assets/lbg_470.png"),
			url("https://lidachk.github.io/cssBayan/cssBayan/assets/filter.svg"),
			linear-gradient(90deg, #261947, #63339c, #140f22);
	}

	.label {
		padding: 1em;
	}

	main {
		font-size: 1rem;
	}
}

@media all and (min-width: 1023px) {
	/*descktop*/
	:root {
		--mem-width: 38rem;
		--mem-height: 36rem;
	}

	body {
		background-image: url("https://lidachk.github.io/cssBayan/cssBayan/assets/lbg.png"),
			url("https://lidachk.github.io/cssBayan/cssBayan/assets/filter.svg"),
			linear-gradient(90deg, #261947, #63339c, #140f22);
	}

	.head {
		margin: 1em 0;
		text-align: center;
		text-transform: uppercase;
	}

	.label {
		padding: 1rem;
	}

	body {
		background-size: min(calc(50wv-20rem), 100vmin), auto, auto;
	}

	main {
		font-size: 1.5rem;
	}
}

This Pen is owned by LidaChk on CodePen.

See more by @lidachk on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.