/* RESET RULES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
:root {
    --white: #fff;
    --black: #003;
}

.gallery {
    color: var(--white);
    margin: 20px 0;
}

.gallery input[type="radio"] {
    position: absolute;
    left: -9999px;
}

.container {
    max-width: 650px;
    padding: 0 20px;
    margin: 0 auto;
}

/* SLIDESHOW
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.featured-wrapper {
    position: relative;
}

.featured-wrapper ul {
    list-style: none;
    padding: 0;
}

.featured-wrapper .featured-list {
    display: grid;
}

.featured-wrapper .featured-list li {
    grid-column: 1;
    grid-row: 1;
    opacity: 0;
    transition: opacity 0.25s;
}

.featured-wrapper .arrows label::before,
.featured-wrapper .arrows label::after {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: var(--black);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 24px 24px;
    background-color: var(--white);
    opacity: 0.5;
    transition: opacity 0.25s;
}

.featured-wrapper .arrows label::before {
    left: 10px;
}

.featured-wrapper .arrows label::after {
    right: 10px;
}

.featured-wrapper .dots {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
}

.featured-wrapper .dots li:not(:last-child) {
    margin-right: 8px;
}

.featured-wrapper .dots label {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid var(--white);
    transition: background 0.25s;
}

.featured-wrapper .dots label:hover {
    background: currentColor;
}

/* MIMIC CLICK EVENT
–––––––––––––––––––––––––––––––––––––––––––––––––– */
[id="image1"]:checked ~ .container .featured-list li:nth-child(1),
[id="image2"]:checked ~ .container .featured-list li:nth-child(2),
[id="image3"]:checked ~ .container .featured-list li:nth-child(3),
[id="image4"]:checked ~ .container .featured-list li:nth-child(4),
[id="image5"]:checked ~ .container .featured-list li:nth-child(5),
[id="image6"]:checked ~ .container .featured-list li:nth-child(6),
[id^="image"]:checked ~ .container .arrows [for^="image"]:hover::before,
[id^="image"]:checked ~ .container .arrows [for^="image"]:hover::after {
    opacity: 1;
}

[id="image1"]:checked ~ .container .arrows [for="image6"]::before,
[id="image2"]:checked ~ .container .arrows [for="image1"]::before,
[id="image3"]:checked ~ .container .arrows [for="image2"]::before,
[id="image4"]:checked ~ .container .arrows [for="image3"]::before,
[id="image5"]:checked ~ .container .arrows [for="image4"]::before,
[id="image6"]:checked ~ .container .arrows [for="image5"]::before {
    content: "";
    background-image: url(../images/prev.png);
}

[id="image1"]:checked ~ .container .arrows [for="image2"]::after,
[id="image2"]:checked ~ .container .arrows [for="image3"]::after,
[id="image3"]:checked ~ .container .arrows [for="image4"]::after,
[id="image4"]:checked ~ .container .arrows [for="image5"]::after,
[id="image5"]:checked ~ .container .arrows [for="image6"]::after,
[id="image6"]:checked ~ .container .arrows [for="image1"]::after {
    content: "";
    background-image: url(../images/next.png);
}

[id="image1"]:checked ~ .container .dots [for="image1"],
[id="image2"]:checked ~ .container .dots [for="image2"],
[id="image3"]:checked ~ .container .dots [for="image3"],
[id="image4"]:checked ~ .container .dots [for="image4"],
[id="image5"]:checked ~ .container .dots [for="image5"],
[id="image6"]:checked ~ .container .dots [for="image6"] {
    background: currentColor;
}