.codepen-info {
    max-width: 950px;
    margin: 0 auto;
    background: #f4f4f4;
    padding: 20px 30px;
    margin-top: 40px;

    h1 {
        font-weight: 500;
        text-align: center;
        color: black;
        margin-top: 0;
    }

    p {
        color: #777;
    }

    .src {
        padding: 15px;
        background: white;
        border-radius: 5px;
        margin-bottom: 15px;

        p.coded {
            background: #f1f1f1;
            color: black;
        }
    }
}

.page-width {
    max-width: 900px;
    margin: 0 auto;

    h2 {
        text-align: center;
    }
}

.splide {
    max-width: 800px;
    margin: 0 auto;
}

.splide__slide {
    img {
        max-width: 100%;
    }
}

.splide__arrow--prev {
    margin-left: -50px;
}

.splide__arrow--next {
    margin-right: -50px;
}

.splide__pagination {
    margin-bottom: -35px;
}

.splide__pagination__page.is-active {
    background: green;
}

.link-tag {
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
}

.hover-box:hover .link-tag {
    opacity: 1;
    visibility: visible;
}