:root {
  --primary-color: #fcd5ce;
  --secondary-color: #fec99a;
  --accent-color: #fc9ba2;
  --bg-primary: #f9f9f9;
  --background-secondary: #d2a1e1;
}


* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
@media screen and (orientation: landscape) {
    .carousel img {
      height: 70vh;
      width: 50vw;
    }
  }

body{
color: white;
}

h1{
  color: black;
}

.logo{
    width: 500px;
}

.background-primary {
  background-color: blue;
}

.background-secondary {
  background-color: blue;
}

.text-black{
  color: black;
}

.text-blue{
  color: blue;
}

.underline{
  text-decoration: underline;
}

.carousel-item {
    position: relative;
  }
  
  .carousel-item::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    background: linear-gradient(0deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 50%);
    z-index: 1;
  }
  
  .carousel-item > img {
    width: 100%;
    height: 70vh;
        z-index: 0;
  }

  /* gallery */

  figure {
    margin: 0;
    display: grid;
    gap: 5px;
    grid-template-rows: 1fr auto;
    margin-bottom: 10px;
    break-inside: avoid;
  }
  
  figure > img {
    max-width: 100%;
    display: block;
    grid-row: 1 / -1;
    grid-column: 1;
  }
  
  figure a {
    color: black;
    text-decoration: none;
  }
  
  figcaption {
    grid-row: 2;
    grid-column: 1;
    background-color: rgba(255,255,255,.5);
    padding: .2em .5em;
    justify-self: start;
  }
  
  .gallery-container {
    column-count: 4;
    column-gap: 20px;
    margin: 20px 20px;
  }