main {
    width: 70%;
    margin: 2rem auto;
    padding-bottom: 4rem;
}
@media screen and (max-width: 1280px) {
	main.homepage {
        width: 90%;
	}
    
    main {
        width: 80%;
	}
}
@media screen and (max-width: 730px) {
	main {
		padding-bottom: 10rem;
        width: 90%;
	}
    .space-on-small-screens {
        height: 2.5rem;
    }
}

h1 {
    text-align: center;
    /* color: hsl(20, 5%, 35%); */
    color: hsl(359, 57%, 30%);
    font-size: 25px;
}

.main-white-bg {
    background-color: #ffffff8c;
    padding: 1rem;
    box-shadow: 0 0 1rem rgb(54, 54, 54);
    border-radius: .5rem;
}
.flex-center {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.cards-homepage, .maps, .characters, .documents, .sights, .graphics {
    display: grid;
    column-gap: 1rem;
    row-gap: 1rem;
    justify-content: center;
}
.cards-homepage {
    grid-template-columns: repeat(auto-fill, 16rem);
}
.maps, .sights, .graphics {
    grid-template-columns: repeat(auto-fill, 15rem);
}
.characters {
    grid-template-columns: repeat(auto-fill, 12rem);
}
.documents {
    grid-template-columns: repeat(auto-fill, 15rem);
}
a.card {
    text-decoration: none;
}
.card {
    width: 100%;

    background-color: #fff;
    box-shadow: 0 0 1rem rgb(54, 54, 54);
    border-radius: .5rem;
}
.card:not(.noanim) {
    opacity: 0;
    animation-name: fadeIn;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.card .header, .card .header img {
    width: 100%;
    border-top-left-radius: .5rem;
    border-top-right-radius: .5rem;
}
.card:hover .header {
    overflow: hidden;
}
.card .header img {
    transform: scale(100%);
    transition: all 500ms ease-out;
}
.maps .card .header img {
    height: 13rem;
}
.characters .card .header img {
    height: 15rem;
}
.documents .card .header img {
    height: 18rem;
}

.card:hover .header img {
    opacity: 0.5;
    transform: scale(110%);
    transition: all 500ms ease-out;
}
.card .title {
    width: 100%;
    display: flex;
    align-items: center;
}
.card .title p {
    margin: 1rem;
    width: 100%;
    text-align: center;
}