human-anatomy-3d/src/assets/styles/_hero.css

.hero__wrapper {
    --offset: 8rem;
    margin-bottom: var(--offset);
    padding: 0 2rem;
    --weird-gap: 0.04rem;
    z-index: 1; /* temp, to overlap slider */
}

.hero__video {
    border-radius: var(--r-1);
}

.hero__banner {
    background: var(--c-bkg);
    border-radius: var(--r-1) var(--r-1) 0 0;
    padding: var(--p-1);
    position: absolute;
    bottom: calc(-1 * var(--offset));
    left: 6rem;
}

.hero__banner h1 {
    width: 14ch;
    font-size: 4.2rem;
}

.banner-edge-left {
    position: absolute;
    left: calc(-1 * var(--r-1) + var(--weird-gap));
    height: var(--r-1);
    width: var(--r-1);
    bottom: calc(var(--offset) - var(--weird-gap));
}

.banner-edge-right {
    position: absolute;
    right: calc(-1 * var(--r-1) + var(--weird-gap));
    height: var(--r-1);
    width: var(--r-1);
    bottom: calc(var(--offset) - var(--weird-gap));
    transform: scaleX(-1);
}

.hero__info {
position: absolute;
top: 30%;
right: 15%;
display: flex;
flex-direction: column;
gap: 1rem;
align-items: center;
}

.no-flexbox-gap .hero__info > *:not(:last-child) {
    margin-bottom: 1rem;
}

.hero__info .platform-list {
display: flex;
gap: 0.8rem;
}

.no-flexbox-gap .hero__info .platform-list > *:not(:last-child) {
    margin-right: 0.8rem;
}

.hero__info .platform-list svg {
height: 1.8rem;
width: 1.8rem;
}

.hero__info .platform-list svg path {
fill: var(--c-2);
opacity: 0.25;
}

.btn--hero {
text-transform: uppercase;
font-size: 1.5rem;
background: var(--c-3);
border-radius: 999px;
padding: 1.9rem 2rem;
line-height: 1;
color: black;
}

.btn--hero:hover {
background: var(--c-bkg);
}


.hero__wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
  }