#home-img {
    max-width: 100%;
    height: absolute;
    filter: brightness(50%) grayscale(25%);
}

#img-text {
    position: absolute;
    top: 8vw;
    width: 75vw;
    left: 12.5vw;
    text-align: center;
}

#img-header {
    font-size: 2.7vw;
    color: white;
    text-shadow: 2px 2px 1px black;
}

#img-blurb {
    font-size: 1.3vw;
    color: white;
    text-shadow: 2px 2px 1px black;
}

#img-button {
    font-size: 1.6vw;
    color: white;
    text-shadow: 2px 2px 1px black;
    background: rgba(68,75,75,0.2);
    border-color: white;
    margin: 0.8vw;
}

@import "https://unpkg.com/open-props";
@import "https://unpkg.com/open-props/normalize.min.css";

.media-scroller {
    --_spacer: var(--size-3);
    position: relative;
    display: grid;
    flex-wrap: wrap;
    gap: var(--_spacer);
    grid-auto-flow: column;
    grid-auto-columns: 48%;
    padding: 0 var(--_spacer) var(--_spacer);
    margin: 3vw;
    overflow-x: hidden;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
}

.media-scroller--with-groups {
    grid-auto-columns: 100%;
}

.media-group {
    display: grid;
    grid-auto-flow: column;
    transform: scale(80%);
}

.media-element {
    display: grid;
    grid-template-rows: min-content;
    gap: 2em;

}

.media-image {
    object-fit: fill;
    display: block;
    margin: auto;
    min-height: 9em;
}

.media-link {
    color: black;
}

.media-link:hover {
    text-decoration: none;
}

.snaps-inline {

    scroll-padding-inline: var(--_spacer, 1rem);
}

.snaps-inline > * {
    scroll-snap-align: center;
}

.hr-text {
    text-align: center;
    font-size: 2em;
    margin: 2em;
}
.hr-text:after {
    content: attr(data-content);
    display: inline-block;
    position: relative;
    top: -0.8em;
    padding: 0 1em;
    background: #ffffff;
}

.card {
    /* Add shadows to create the "card" effect */
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    width: 32em;
    margin: 0.6em;
    padding-top: 2em;
    display: flex;
}

/* On mouse-over, add a deeper shadow */
.card:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

/* Add some padding inside the card container */
.card-container {
    padding-left: 2em;
    padding-bottom: 1em;
    padding-right: 2em;
    word-wrap: anywhere;
}

.arrow {
    border: solid rgba(0,0,0,0.4);
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
    scale: 4;
    margin: 0px 0px 0px 83px;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.right {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

.left {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
}

.up {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
}

.down {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

.scroller-arrow-left {
    position: absolute;
    left: 2vw;
    right: 0;
    z-index: 10;
    background-color: rgba(50,50,50,0.3);
    width: 170px;
    height: 100%;
    border-radius: 6px;
    opacity: 0;
    transition: opacity 500ms;
}

.scroller-arrow-left:hover {
    opacity: 1;
}

.scroller-arrow-right {
    position: absolute;
    top: 0;
    right: 2vw;
    z-index: 10;
    background-color: rgba(50,50,50,0.3);
    width: 170px;
    height: 100%;
    border-radius: 6px;
    opacity: 0;
    transition: opacity 400ms;
}

.scroller-arrow-right:hover {
    opacity: 1;
}

.scroll-container {
    position: relative;
}