* {
    box-sizing: border-box;
}

* {
  scrollbar-width: thin;          /* "auto" or "thin" */
  scrollbar-color: black white;   /* scroll thumb and track */
}

*::-webkit-scrollbar {
  width: 4px;               /* width of the entire scrollbar */
}

*::-webkit-scrollbar-track {
  background: white;        /* color of the tracking area */
}

*::-webkit-scrollbar-thumb {
  background-color: black;    /* color of the scroll thumb */
  border-radius: 0;       /* roundness of the scroll thumb */
  border: 1px solid white;  /* creates padding around scroll thumb */
}


.flex {
    display: flex;
}

.wrap {
    flex-wrap: wrap;
}

main {
    display: flex;
}

.content {
    display: flex;
    width: 100%;
}

section {
    padding: 0 calc(2rem + 6px) 0 2rem;
    gap: 1rem;
}


section.full {
    max-width: 90%;
    width: 90%;
    height: calc(130rem * 3);
    padding: 0 calc(2rem + 6px) 0 2rem;
}

section.full img {
    width: 19.625rem;
}

section {
}

.stick > section img{
    max-width: calc(30% - 2px);
}

section img {
    height: auto;
    overflow: hidden;
    border-radius: 5px;
    margin: 0 0 8px 8px;
    background-color: #333;
    color: white;
    position: relative;
    width: 30%;
    min-width: 20rem;
}


.masonry {
    display: flex;
    flex-flow: column wrap;
    margin-left: -8px; /* Adjustment for the gutter */
    width: 100%;
    height: 130rem;
}

.masonry.full {
    width: 33%;
}


.grid-item {
    max-width: 26%;
}