.section-modules{
    background-color:transparent;
    width: 100%;
    display: flex;
    gap: 20px;
    align-items: center;
    flex-direction: column;
    margin: auto;
}

.block-module-list{
    background-color:var(--white-color);
    max-width: 100%;
    display: flex;
    align-items: start;
    flex-direction: column;
    cursor: pointer;
    padding: 20px;
    border: 1px solid var(--light-grey-color);
}

.block-module-list:hover{
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
}

.modules-container{
    gap: 10px;
}

.quantity{
    justify-content: space-between;
    max-width: 200px;
}

.selected{
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
    background-color: rgb(176, 191, 204);
}

.modules-list-container{
    width: 100%;
    /*padding: 0 40px;*/
    display: grid;
    margin: auto;
    grid-template-columns: repeat(auto-fill,minmax(300px,1fr));
    /*grid-auto-rows: auto;*/
    gap:20px;
}

@media (max-width:500px){ 
    .modules-list-container{
        width: auto;
    }
}

.module-image{
    width: 300px;
    object-fit: contain;
    height: 300px;
}

.module-title{
    text-align: center;
}
/*
@media (max-width:501px){ 
    .modules-list-container{
        background-color: white;
        max-width: 100%;
        display: flex;
        align-items: start;
        flex-direction: column;
        font-family: "Bad Script", cursive;
        gap:20px;
    }
}*/