/*
// Name: Khalil Abuzarfia
// Class: 1ITF01
// R-number: R1043578
*/

@import "general.css";

.titel {
    color: var(--color-text-main);
    text-align: center;
}
.titel p {
    color: var(--color-accent);
    padding-top: 40px;
    padding-bottom: 40px;
}
.lijn {
    height: 4px;
    width: 60px;
    background-color: var(--color-accent);
    margin: 20px auto;
    border-radius: 3px;
}

.shop-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 40px 20px;
    gap: 50px;
}

.product-card {
    background-color: #fff;
    border-radius: 8px;
    width: 300px;
    padding: 20px;
    text-align: center;
    transition: .2s ease;
}

.product-card:hover {
    transform: scale(1.07);
    box-shadow: var(--shadow-hover);
}

.product-card img {
    width: 100%;
    border-radius: 5px;
    box-shadow: 3px 3px gray;
}

.product-card p {
    color: #555;
    font-size: 14px;
}

.product-card button {
    padding: 8px 12px;
    background-color: var(--btn-primary);
    color: #fff;
    border: none;
    border-radius: 5px;
}

.product-card button:hover {
    background-color: var(--btn-hover);
    color: #000;
}

.extra-info {
    color: var(--color-text-main);
    text-align: center;
    margin: 50px auto 150px;
}

@media (min-width: 768px) {
    .shop-container {
        margin: 80px;
    }
}

@media (min-width: 1200px) {
    .shop-container {
        margin: 120px;
    }
}