@import url('https://fonts.googleapis.com/css2?family=Dela+Gothic+One&family=Fuggles&display=swap');

$font-main: 'Fuggles', cursive;
$font-headings: 'Dela Gothic One', cursive;

$color-bg: hsl(40,43%,82%);
$color-heading: hsl(220,43%,30%);

:root{
    margin: 0;
    padding: 0;
}

h1{
    font-family: $font-main;
    color: $color-heading;
    padding-bottom: 2rem;
}

body{
    font-family: $font-main;
    background-color: $color-bg;
    padding: 1rem;
}

@mixin imagegrid($columns, $margin){
    $availablespace: calc(100% - $margin * ($columns - 1));
    gap: $margin;
    &>*{
        width: calc($availablespace / $columns);
        margin-right: $margin;
        margin-bottom: $margin;
    }
    &>*:nth-child(#{$columns}n){
        margin-right: 0;
    }
}

.imagegrid{


    .item{
        float: left;
        aspect-ratio: 1/1;

        img{
            border-radius: 15px;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
}

@media (max-width: 599px) {
    .imagegrid{

        @include imagegrid(3, 1%);
    }
}

@media (min-width: 600px){
    .imagegrid{
        @include imagegrid(4, 2%);
    }
}