img {max-width: 100%;}
.content a,.content a:link,.content a:visited,.content a:hover,.content a:active {color: var(--primary);}

.birthday {background: var(--secondary); color: white; padding: 0.5rem; margin-bottom: 1rem; text-align: center;}
.content .birthday a {color: white;}

.carousel-caption {background: rgba(0,0,0,0.7);}

.home-welcome {background-image: url('/img/home_kylie.png'); background-repeat: no-repeat; background-position: 95% bottom;}
.release-box {background-color: #eee; position: relative; display: block;}
.release-box img {width: 100%; aspect-ratio: 1/1; object-fit: contain;}
.release-box p {position: absolute; bottom: 0; left: 0; width: 100%; background: black; color: white; text-align: center; padding: 5px; margin: 0; transition: 0.2s;}

.video169 {aspect-ratio: 16/9; width: 100%;}

.home-grid {display: grid; gap: 1rem;}
.home-grid>div {background-color: #eee;}

.home-welcome,.home-additions {padding: 1rem;}
.home-youtube {overflow: hidden;}

.home-welcome h2 {font-size: clamp(10px,calc(1.325rem + .9vw),2.4cqb);}

@media (min-width: 768px) {
  .home-grid {grid-template-columns: repeat(12,1fr); grid-template-rows: auto calc(50cqw / 16 * 9 - 4rem) auto;}
  .home-welcome {grid-area: 1/1/1/span 4;}
  .home-carousel {grid-area: 1/5/1/span 8;}
  .home-youtube {grid-area: 2/1/2/span 6;}
  .home-release-0 {grid-area: 2/7/2/span 3;}
  .home-release-1 {grid-area: 2/10/2/span 3;}
  .home-single {grid-area: 3/1/3/span 4;}
  .home-album {grid-area: 3/5/3/span 4;}
  .home-additions {grid-area: 3/9/3/span 4;}

  .carousel,.carousel-inner,.carousel-item {height: 100%;}
  .carousel-item img {height: 100%; object-fit: cover;}

  .release-box {height: 100%;}
  .release-box img {height: 100%; max-width: 100%; object-fit: cover;}
  .release-box p {opacity: 0;}
  .release-box:hover p {opacity: 1;}
}

@media (min-width: 1200px) {
  .home-welcome h2 {font-size: 2rem;}
}