:root {
    --color-primary: #842124; 
  }


.margin-top {
    margin-top: 16px;
}

.margin {
    margin: 16px;
}

.wrapper {
    display: grid;
    grid-template-columns: auto minmax(440px, 800px) auto;
    width: 100%;
}

.wrapper > * {
    grid-column-start: 2;
    grid-column-end: 3;
}

.flex {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem
}

.flex-no-gap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}

.grid {
    display: grid;
    gap: 2rem
}

.auto-1fr {
    grid-template-columns: 3fr 1fr;
}

.center {
    justify-self: center;
}


.navbar {
    display: flex;
    gap: 30px;
    padding: 10px;
    text-transform: uppercase;
    border-bottom: 1px solid #ccc;
    margin-bottom: 5px;
}

.navbar *:first-child {
    flex-grow: 1;
}


.flex-card {
    flex-basis: 30ch;
    flex-grow: 1;
    overflow: hidden;
}

.card {
    padding: 0;
    border-radius: 3px;
    background: var(--bg-color);
    -webkit-box-shadow: 0 1px 3px var(--color-grey);
    box-shadow: 0 1px 3px var(--color-grey);
    max-height: 400px;
}

.card-content {
    padding: 1rem 2rem;
}

.carousel-wrapper {
    height: 200px;
    overflow: hidden;
}