#prices{
    padding: 3em 6em;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas: 
    "prices_item1 prices_item2 prices_item3";
    gap: 2.5em;
    text-align: center;
}
#prices>*{
    border: 0.125em solid yellow;
    padding: 2em 2em;
}
#prices_item1{
    grid-area: prices_item1;
}

#prices_item2{
    grid-area: prices_item2;
}

#prices_item3{
    grid-area: prices_item3;
}

.prices_item{
    gap: 1em;
}

.prices_item>span{
    align-self: center;
    width: max-content;
    color: black;
    border-radius: .25em;
    box-shadow: 0em .1875em .3125em 0em rgba(0, 0, 0, 0.14), inset 0em .1875em .4375em 0em rgba(0, 0, 0, 0.31);
    background: #e4d804;
    padding: 1.25em 1.875em;
}
.prices_item>div{
    font-size: .8em;
    padding: .7em 0;
    border-bottom: 1px solid gray;
}

.prices_item>button{
    width: max-content;
    align-self: center;
    border-radius: 3em;
    margin-top: 1em;
    padding: 1em 2.5em;
    font-weight: 700;
}
.prices_item:hover{
    cursor: pointer;
}
.prices_item:hover button{
    background-color: var(--yellow);
    color: black;
}



@media (max-width: 1100px){
    #prices{
        padding: 3em 15em;
        grid-template-columns: 1fr;
        grid-template-areas: 
        "prices_item1"
        "prices_item2"
        "prices_item3";
    }
}

@media (400px <= width <=800px) {
	#prices{
        padding: 1em 8em;
    }
}

@media (170px <= width <=400px) {
    #prices>*{
        padding: 2em 3em;
    }
	#prices{
        padding: 1em;
    }
}

@media (0px <= width <=170px) {
    #prices>*{
        padding: .5em;
    }

    #prices{
        padding: 1em;
    }
}