main #home {
    align-items: start;
    display: grid;
    grid-gap: 16px;
    grid-template-columns: 1fr 192px;
    grid-template-rows: max-content max-content max-content max-content max-content 1fr;
    height: 100%;
    width: 100%;
}

main #home .item {
    background: linear-gradient(120deg, #2e4a5f, #36617d);
    padding: 16px;
}

main #projects {
    grid-column: 1 / span 1;
    grid-row: 1 / span 5;
}

main #opening-times {
    grid-column: 2 / span 1;
    grid-row: 1 / span 1;
    text-align: center;
}

main #instagram {
    grid-column: 2 / span 1;
    grid-row: 2 / span 1;
    text-align: center;
}

main #facebook {
    grid-column: 2 / span 1;
    grid-row: 3 / span 1;
    text-align: center;
}

main #youtube {
    grid-column: 2 / span 1;
    grid-row: 4 / span 1;
    text-align: center;
}

main .icon {
    background-color: #9fbbcb;
    display: inline-block;
    height: 64px;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    width: 64px;
}

main .icon.instagram {
    mask-image: url("/data/icons/instagram.svg");
    -webkit-mask-image: url("/data/icons/instagram.svg");
}

main .icon.facebook {
    mask-image: url("/data/icons/facebook.svg");
    -webkit-mask-image: url("/data/icons/facebook.svg");
}

main .icon.youtube {
    mask-image: url("/data/icons/youtube.svg");
    -webkit-mask-image: url("/data/icons/youtube.svg");
}


@media screen and (max-width: 767px) {
    main #home {
        align-items: normal;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr;
    }

    main #projects {
        grid-column: 1 / span 3;
        grid-row: 1 / span 1;
    }

    main #opening-times {
        grid-column: 1 / span 3;
        grid-row: 2 / span 1;
    }

    main #instagram {
        grid-column: 1 / span 1;
        grid-row: 3 / span 1;
    }

    main #facebook {
        grid-column: 2 / span 1;
        grid-row: 3 / span 1;
    }

    main #youtube {
        grid-column: 3 / span 1;
        grid-row: 3 / span 1;
    }
}

@media screen and (max-width: 511px) {
    main #home {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
    }

    main #projects {
        grid-column: 1 / span 1;
        grid-row: 1 / span 1;
    }

    main #opening-times {
        grid-column: 1 / span 1;
        grid-row: 2 / span 1;
    }

    main #instagram {
        grid-column: 1 / span 1;
        grid-row: 3 / span 1;
    }

    main #facebook {
        grid-column: 1 / span 1;
        grid-row: 4 / span 1;
    }

    main #youtube {
        grid-column: 1 / span 1;
        grid-row: 5 / span 1;
    }
}