html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    background-color: black;
    background-image: radial-gradient(circle at 50% 0%, #383838, #000000);
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: rgb(219, 219, 219);
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    border-radius: 3px;
}

a {
    text-decoration: none;
    color: rgb(182, 182, 182);
}

h2 {
    color: rgb(217, 255, 0);
	margin: 0;
}

h3 {
    position: relative;
    padding-bottom: 10px;
}

h3::after {
    content: "";
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    height: 3px;
    width: 50%;
    background: rgb(217, 255, 0);
}

.right h3::after {
    left: 50%;
}

.container {
    max-width: 920px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 10px;
    background-color: rgba(255, 255, 255, 0.02);
}

.card {
    position: relative;
}

.item {
    position: relative;
    padding: 10px;
}

.bottom {
    align-self: end;
}

.right {
    text-align: right;
}

.header {
	text-align: center;
}

.banner {
	min-width: 400px; 
	width: 60%;
	margin: auto;
}

.item:hover .description {
    opacity: 1;
}

.description-content {
    padding: 20px;
}

@media screen and (min-width: 1441px) {
    .container {
        grid-template-columns: repeat(5, 1fr);
    }

    .full-row {
        grid-column: span 5;
    }

    .two-five {
        grid-column: span 2;
    }

    .three-five {
        grid-column: span 3;
    }

    .description {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        transition: opacity 0.5s;
        opacity: 0;
        display: grid;
    }

    .description-content {
        background-color: rgba(0, 0, 0, 0.5);
        align-self: end;
    }
}