@font-face {
    font-family: 'LatoRegular';
    src: url('LatoLatin-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'LatoLight';
    src: url('LatoLatin-Light.woff2') format('woff2');
}

:root {
    --swiper-theme-color: rgba(255, 255, 255, 0.87);
}

body {
    font-family: 'LatoLight';
    color: rgba(255, 255, 255, 0.87);
    background-color: #121212;
    max-width: 80rem;
    margin: auto;
}

.header {
    text-align: center;
}

.header h2, h3 {
    display: inline-block;
    font-size: 1.2rem;
}

.swiper-container {
    width: 95%;
    height: auto;
}

.swiper-slide {
    padding-top: 66.6%;
    position: relative;
}

.description {
    width: 95%;
    margin: auto;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.description a {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.87);
}

.description a:hover {
    text-decoration: underline;
}

.footer {
    width: 95%;
    text-align: center;
    margin: auto;
    margin-bottom: 2rem;
}

.footer a {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.87);
    margin-right: 1rem;
}



.swiper-slide img {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: auto;
    height: 100%;
    margin: auto;
}