#prices {
	background: url('../bilder/colors-prizes2.jpg') no-repeat center center;
	background-attachment: fixed;
	background-size: cover;
}

#pricesSection {
	padding: 0 20px;
}

#pricesSection h1 {
	text-align: center;
    text-shadow: 1px 1px 5px #a9a9a9;
    margin: 2em 0;
}

.priceCard {
	position: relative;
    width: 300px;
    height: 360px;
    padding: 20px;
    color: #585858;
    background: rgb(255 255 255 / 50%);
    border: 1px solid rgb(151 151 151 / 30%);
    border-radius: 20px;
    box-shadow: 0px 1px 3px #7e7e7e;
    z-index: 10;
    display: grid;
    text-shadow: 1px 1px 1px #cbcbcb;
}

.priceCard:before {
    content: "";
    position: absolute;
    top: -100px;
    left: -100px;
    right: -100px;
    bottom: -100px;
    background: url('../bilder/colors-prizes2.jpg') no-repeat #fff;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    filter: blur(8px);
    z-index: -2;
}

.priceCard:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgb(217 217 217 / 30%);
    z-index: -1;
}

.priceCard h2 {
	font-size: 1.3em;
    font-weight: 300;
    align-self: center;
    margin: 20px 0;
}

.priceCard p:nth-of-type(1) {
	align-self: self-start;
}

.priceCard p:nth-of-type(2) {
	align-self: self-end;
}

#priceGrid {  
	display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 2em 0;
    grid-auto-flow: row;
    grid-template-areas:
        "cardOne cardTwo cardThree"
        "cardFour cardFive cardSix";
    max-width: 1600px;
    margin: 0 auto;
    justify-items: center;
    padding-bottom: 8em;
}

#cardOne { grid-area: cardOne; }

#cardTwo { grid-area: cardTwo; }

#cardThree { grid-area: cardThree; }

#cardFour { grid-area: cardFour; }

#cardFive { grid-area: cardFive; }

#cardSix { grid-area: cardSix; }
  
  
@media(max-width: 1160px) {
	#priceGrid { 
		grid-template-columns: 1fr 1fr;
	    grid-template-rows: 1fr 1fr 1fr;
	    gap: 2em 0;
	    grid-auto-flow: row;
	    grid-template-areas:
	        "cardOne cardTwo" 
	        "cardThree cardFour" 
	        "cardFive cardSix";
	}
}

@media(max-width: 800px) {
	#priceGrid { 
		grid-template-columns: 1fr;
	    grid-template-rows: 1fr 1fr 1fr 1fr;
	    gap: 2em 2em;
	    grid-auto-flow: row;
	    grid-template-areas:
	        "cardOne" "cardTwo" 
	        "cardThree" "cardFour" 
	        "cardFive" "cardSix";
	}
}