/* diascope */
.diascope__frame {
	/* Frame width can be anything. */
	width: 100%;

	/* Hide slides outside the frame. */
	overflow: hidden;
}

.diascope__reel {
	/* Display the slides in a row. */
	display: flex;
}

.diascope__slide {
    display: block;
    flex: 0 0 25%;
    height: 200px;

    padding: 20px;
    font-size: 100px;
    color: white;
    border: 2px solid #fff;
    background-color: #334daf;
}

.diascope__slide:focus,
.diascope__slide:hover {
    background-color: #ee0022;
}

/* diascope */
.diascope__frame {
	/* Frame width can be anything. */
	width: 100%;

	/* Hide slides outside the frame. */
	overflow: hidden;
}

.diascope__reel {
	/* Display the slides in a row. */
	display: flex;
}

.diascope__slide {
    display: block;
    flex: 0 0 25%;
    height: 200px;

    padding: 20px;
    font-size: 100px;
    color: white;
    border: 2px solid #fff;
    background-color: #334daf;
}

.diascope__slide:not(:last-child) {
    margin-right: 20px;
}

.diascope__slide:focus,
.diascope__slide:hover {
    background-color: #ee0022;
}

Add gaps to the slides
Add gaps to the slides
