/**Main**/

main {
    background-color: rgb(43, 43, 43);
    color: greenyellow;
    font-family: 'Oswald', sans-serif;
    width: 100%;
    padding: 10px;
    padding-top: 120px;
}

.produkt {
    row-gap: 50px;
    column-gap: 10px;
    text-align: center;
    display: grid;
    grid-template-areas:
    'ngt ngt ngt ngt'
    'ett ett ett ett'
    'tvo tvo tre tre'
    'fyra fyra fyra fyra'
    'fem sex sju otta';
    grid-gap: 20px;
    width: 100%;
    max-width: 100%;
}

.ett, .tvo, .tre, .fyra, .fem, .sex, .sju, .otta {
    background-color: rgb(99, 99, 99);
    border: solid yellowgreen 1px;
    width: 100%;
    height: 300px;
}

.ngt {
    grid-area: ngt;
}

.ett {
    grid-area: ett;
    border-radius: 20px;

}

.tvo {
    grid-area: tvo;
}

.tre {
    grid-area: tre;
}

.fyra {
    grid-area: fyra;
    border-radius: 20px;
    height: 400px;
}

.fem {
    grid-area: fem;
}

.sex {
    grid-area: sex;
}

.sju {
    grid-area: sju;
}

.otta {
    grid-area: otta;
}

/*När sidan är mindre än 900px ändras inte mycket*/
@media (max-width: 900px) {
    .produkt {
        grid-template-areas:
            'ngt'
            'ett'
            'tvo'
            'tre'
            'fyra'
            'fem'
            'sex'
            'sju'
            'otta';
    }
    .ett, .tvo, .tre, .fyra, .fem, .sex, .sju, .otta {
        width: 100%;
        height: 200px;
    }

    .img1 {
        height: 130px
    }
}

@media (max-width: 600px) {
    main {
        padding-top: 145px;
    }
}

.img2, .img3, .img4 {
    width: 100%;
    height: 100%;
    object-fit: cover;
}