@font-face {
    font-family: 'ClashGrotesk';
    src: url('../fonts/ClashGrotesk-Variable.ttf');
}

body {
    font-family: 'ClashGrotesk', sans-serif;
    background-color: black;
}

main {
    background-color: var(--bs-light);
}

.bg-primary-light {
    background-color: #F47A43;
}

.bg-primary-lighter {
    background-color: #F39970;
}

.bg-image {
    background-size: 100%;
    background-position: center top;
}

.bg-image-c {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.carousel-image {
    width: calc(55vw);
    max-width: 350px;
    height: calc(55vw);
    max-height: 350px;
}

.carousel-caption {
    padding: 0 60px;
    max-width: calc(500px + 2*60px);
    left: 0;
    right: 0;
    margin-top: 50px;
    margin-right: auto;
    margin-left: auto;
    position: relative;
}

.portrait {
    position: relative;
    max-width: 350px;
    width: 100%;
    height: auto;
    aspect-ratio: 1/1;
    overflow: hidden;
}

.portrait img {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 0;
    translate: 0 -50%;
}