.about-container{
  display: flex;
  flex-direction: column; 
  justify-content: center;
  align-items: center;
  max-width: 1200px;
  width: 100%;
  padding: 0 0.5rem;
}

.about-buttons-container{ 
  display: flex;
  flex-direction: row;
  gap: 1rem;
  margin-bottom: -1px;
  padding: 0 0.75rem;
}

.in-active-button{
  display: flex;
  justify-content: center;
  align-items: center;
  height: min-content;
  gap: 1rem;  
  padding: 0.75rem 1rem; 
  border-radius: 0.5rem; 
  background-color: #C6E0EB;
  color: #0F536C;
  border: none;
}

.about-buttons-container .active{
  padding-bottom: 1.5rem;
  background-color: #0F536C;
  color: #fff; 
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.chevron{
  stroke: #0F536C;
}

.active .chevron{
  stroke: #fff;
}
.about-box{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 0.75rem; 
  border-radius: 1rem;
  border: 4px solid #0F536C; 
  background-color: #C6E0EB;
}

.about-box p{
  font-size: 22px;
  font-weight: 250;
  line-height: 34px;
  margin-bottom: 1rem;
  text-align: right;
}

.image-text-box{
  display: flex;
  flex-direction: row-reverse;
  gap: 1rem; 
}

.bar-adon-image{
  width: 223px; 
  height: 223px; 
  border-radius: 0.5rem;
  margin-top: 0.5rem;
}

.tapes-box{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 0.75rem;
  padding: 1.5rem; 
  padding-bottom: 1rem;
  border-radius: 1rem;
  border: 4px solid #0F536C; 
  background-color: #0F536C ;
  max-width: 1200px;
  width: 100%;
}

.scroll-box{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

.expand-button{ 
  display: flex;
  flex-direction: row;
  align-items: center;
}

.expand-button .flipped{
  transform: rotate(180deg);
}

.expand-button h3{
   color: #fff;
}

.expand-button h3:hover{
  text-decoration: underline;
}

.tapes-box button{
  background: transparent;
  border: none; 
  padding: 0; 
}

.chevron-left{
  transform: rotate(180deg);
}

.tapes-container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  gap: 0.5rem; 
  max-width: 1100px;
  overflow: hidden;
  /* overflow-x: scroll;
  scrollbar-width: thin;
  scrollbar-color: #ffffffef #ffffff00; */
}

.tapes-grid{
  display: grid
;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    width: 100%;
    justify-items: center;
}

.tape-item {
  flex: 0 0 250px; /* Fixed width of 250px, don't grow or shrink */
  width: 250px;
  background-color: #C6E0EB;
  padding: 0.75rem;
  border-radius: 0.75rem;
}

.tape-item a {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%; 
  gap: 0.5rem;
  text-decoration: none;
}

.tape-item .tape-title{
  text-align: center;
  color: #0F536C;
  font-size: 1.25rem;
}

.tape-thumbnail {
  width: 100%; 
  height: 250px;
  object-fit: cover;
  border-radius: 0.5rem;
}

@media (max-width: 768px) {
  .in-active-button h3{
    padding: 0;
  }

  .about-buttons-container .in-active-button{
    padding: 0.5rem;
  }

  .about-buttons-container button.active{
    padding-bottom: 1rem;
  }

  .tapes-container .tape-item{
    flex: 0 0 150px;
    padding: 0.5rem;
  }

  .tapes-container .tape-item .tape-title{
    font-size: 1rem;
  }

  .tapes-container .tape-item .tape-thumbnail{
    min-width: 150px;
    height: 200px; 
  }

  .tapes-box{
    padding: 1rem 0.5rem;
  }

  .chevron-left{
    width: 90px;
  }

  .chevron-right{
    width: 90px;
  }

  .about-container .about-box{
    padding: 1rem 0.5rem;
  }

  .about-box .image-text-box{
    display: block;
  }

  .about-box .image-text-box .bar-adon-image{
    float: left;
    margin-right: 0.5rem;
  }

  .about-box p{
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  .about-box .image-text-box .bar-adon-image {
    float: none;
    width: 100%;
    height: auto;
    margin: 0;
}

.about-box p {
  font-size: 18px;
}
}