.window {
    position: relative;
    background: rgb(241, 241, 241);
    height: calc(100% - 110pt);
    overflow: scroll;
}


.window::-webkit-scrollbar {
    display: none;
}

.main {
    position: relative;
    padding: 30pt;
    padding-top: 0;
    overflow: scroll;
    height: 100%;
}

#back {
    position: absolute;
    width: 20pt;
    margin: auto;
    right: 30pt;
    cursor: pointer;
    z-index: 9;
    top: 20pt;
}

h1 {
    padding-top: 30pt;
}

section {
    padding-top: 10pt;
    padding-bottom: 10vh;
}

section h2 {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    background: white;
    z-index: 3;
    padding-top: 20pt;
    padding-bottom: 20pt;
    border-bottom: 1pt solid rgb(237, 237, 237);
}

.meta {
    position: relative;
    background: white;
    max-width: 600pt;
    margin: auto;
    margin-top: 50pt;
}

.main-logo {
    display: flex;
    background-image: url("data:image/svg+xml,%3Csvg width='721' height='406' viewBox='0 0 721 406' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='4.37114e-08' y1='130.5' x2='721' y2='130.5' stroke='%23F3F3F3'/%3E%3Cline x1='432.5' y1='-199.5' x2='432.5' y2='521.5' stroke='%23F3F3F3'/%3E%3Cline x1='144.5' y1='-199.5' x2='144.5' y2='521.5' stroke='%23F3F3F3'/%3E%3Cline x1='4.37114e-08' y1='274.5' x2='721' y2='274.5' stroke='%23F3F3F3'/%3E%3Cline x1='288.5' y1='-199.5' x2='288.5' y2='521.5' stroke='%23F3F3F3'/%3E%3Cline x1='576.5' y1='-199.5' x2='576.5' y2='521.5' stroke='%23F3F3F3'/%3E%3C/svg%3E%0A");
    background: none;
    background-size: 100%;
    background-position: center;
    height: 250pt;
}

.main-logo svg {
    margin: auto;
}

.logos {
    display: flex;
}

.text  {
    flex: 1;
    display: flex;
    transition: all ease-in-out 230ms;
}

.text svg {
    margin: auto;
    margin-left: 10pt;
    max-width: 70%;
    max-height: 55pt;
    opacity: 0.4;
}

.text:hover svg {
    opacity: 1;
}

.type .header {
    width: 100pt;
}


.type {
    display: flex;
}

.colours {
    display: flex;
}

.colours svg {
    display: block;
    width: 100%;
    height: 100%;
    margin-top: 0;
}

.icons-grid {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: flex-start;
}

.icons-grid .icon {
    display: flex;
    padding: 4.85%;
    padding-top: 8%;
    padding-bottom: 8%;
    min-height: 40pt;
    max-height: 45pt;
    min-width: 60pt;
    max-width: 60pt;
    opacity: 0.2;
    transition: all ease-in-out 230ms;
    border: 0.1pt solid rgba(0, 0, 0, 0.194);
}

.icons-grid svg{
    margin: auto;
    height: 24pt;
    width: 24pt;
}

.icons-grid .icon:hover {
    opacity: 1;
}

.packaging {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    height: fit-content;
}

.packaging div {
    display: block;
    width: 100%;
    margin-bottom: 30pt;
}

.packaging svg {
    width: 100%;
    height: auto;
}



.grid-wrapper > div {
	display: flex;
	justify-content: center;
	align-items: center;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}
.grid-wrapper > div > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
    object-position: center;
}

.grid-wrapper {
    position: absolute;
	display: grid;
	grid-gap: 20vw;
	grid-template-columns: repeat(auto-fit, minmax(30vw, 1fr));
	grid-auto-rows: 75vh;
	grid-auto-flow: dense;
    width: 300vw;
    height: 400vh;
    padding: 10vw;
}
.grid-wrapper .wide {
	grid-column: span 2;
    object-position: center;
}
.grid-wrapper .tall {
	grid-row: span 2;
}
.grid-wrapper .big {
	grid-column: span 2;
	grid-row: span 2;
}

@media only screen and (max-width: 2300px) {    

    .grid-wrapper {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(400px, 1sssfr));
        grid-auto-rows: 35vh;
        grid-auto-flow: dense;
    }
}



@media only screen and (max-width: 1000px) {    

    .grid-wrapper {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
        grid-auto-rows: 50vh;
        grid-auto-flow: dense;
    }
    .icons-grid .icon {
        display: flex;
        padding: 3.63%;
        padding-top: 8%;
        padding-bottom: 8%;
    }
}


@media only screen and (max-width: 600px) {    
    .gallery {
        height: 100vh;
    }

    .grid-wrapper {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        grid-auto-rows: 40vh;
        grid-auto-flow: dense;
    }
    
}