@charset "UTF-8";

.card {
  scroll-ansp-align: start;
  flex: 0 0 20em;
  aspect-ratio: 16 / 9;
  background-color: #ffffff;
  padding: 0 0 20px 0;
  border-radius: .5em;
  text-align: center;
  align-content: center;
  border-radius: 20px;
}
.card::scroll-marker {
  content: '';
  height: 1em;
  width: 1em;
  background-color: #262626;
  border-radius: 50%;
  margin-top: -25px;
  }

.card::scroll-marker:target-current {
  background-color: dodgerblue;
}






.carousel {
  width: 93%;
  overflow-x: auto;
  margin: 3em auto;
  display: flex;
  gap: 1em;
  scroll-behavior: smooth;
  anchor-name: --carousel;
  scroll-snap-type: x mandatory;
  scroll-marker-group: after;
}

.carousel::scroll-marker-group {
  display: flex;
  justify-content: center;
  gap: 0.5em;
}

.carousel::-webkit-scrollbar{
  display: none;
}
.carousel::scroll-button(right), .carousel::scroll-button(left)  {
  content: '›';
  border: none;
  background-color: white;
  font-size: 3rem;
  color: black;
  height: 60px;
  width: 60px;
  border-radius: 50%;
  padding-bottom: .1em;
  cursor: pointer; 
  position: fixed;
  position-anchor: --carousel;
  position-area: right center;
  translate: -50%;
  filter: drop-shadow(0px -1px 15px #aaaaaa);
}
.carousel::scroll-button(left) {
  content: '‹';
  position-area: left center;
  translate: 50%;
}
.carousel::scroll-button(right):disabled, .carousel::scroll-button(left):disabled {
  opacity: 0.5;
  cursor: auto; 
}


.carousel2 {
  width: 93%;
  overflow-x: auto;
  margin: 3em auto;
  display: flex;
  gap: 1em;
  scroll-behavior: smooth;
  anchor-name: --carousel2;
  scroll-snap-type: x mandatory;
  scroll-marker-group: after;
}

.carousel2::scroll-marker-group {
  display: flex;
  justify-content: center;
  gap: 0.5em;
}
.carousel2::-webkit-scrollbar{
  display: none;
}
.carousel2::scroll-button(right), .carousel2::scroll-button(left)  {
  content: '›';
  border: none;
  background-color: white;
  font-size: 3rem;
  color: black;
  height: 60px;
  width: 60px;
  border-radius: 50%;
  padding-bottom: .1em;
  cursor: pointer; 
  position: fixed;
  position-anchor: --carousel2;
  position-area: right center;
  translate: -50%;
  filter: drop-shadow(0px -1px 15px #aaaaaa);
}
.carousel2::scroll-button(left) {
  content: '‹';
  position-area: left center;
  translate: 50%;
}
.carousel2::scroll-button(right):disabled, .carousel2::scroll-button(left):disabled {
  opacity: 0.5;
  cursor: auto; 
}



.carousel3 {
  width: 93%;
  overflow-x: auto;
  margin: 3em auto;
  display: flex;
  gap: 1em;
  scroll-behavior: smooth;
  anchor-name: --carousel3;
  scroll-snap-type: x mandatory;
  scroll-marker-group: after;
}

.carousel3::scroll-marker-group {
  display: flex;
  justify-content: center;
  gap: 0.5em;
}
.carousel3::-webkit-scrollbar{
  display: none;
}
.carousel3::scroll-button(right), .carousel3::scroll-button(left)  {
  content: '›';
  border: none;
  background-color: white;
  font-size: 3rem;
  color: black;
  height: 60px;
  width: 60px;
  border-radius: 50%;
  padding-bottom: .1em;
  cursor: pointer; 
  position: fixed;
  position-anchor: --carousel3;
  position-area: right center;
  translate: -50%;
  filter: drop-shadow(0px -1px 15px #aaaaaa);
}
.carousel3::scroll-button(left) {
  content: '‹';
  position-area: left center;
  translate: 50%;
}
.carousel3::scroll-button(right):disabled, .carousel3::scroll-button(left):disabled {
  opacity: 0.5;
  cursor: auto; 
}

.carousel4 {
  width: 93%;
  overflow-x: auto;
  margin: 3em auto;
  display: flex;
  gap: 1em;
  scroll-behavior: smooth;
  anchor-name: --carousel4;
  scroll-snap-type: x mandatory;
  scroll-marker-group: after;
}

.carousel4::scroll-marker-group {
  display: flex;
  justify-content: center;
  gap: 0.5em;
}
.carousel4::-webkit-scrollbar{
  display: none;
}
.carousel4::scroll-button(right), .carousel4::scroll-button(left)  {
  content: '›';
  border: none;
  background-color: white;
  font-size: 3rem;
  color: black;
  height: 60px;
  width: 60px;
  border-radius: 50%;
  padding-bottom: .1em;
  cursor: pointer; 
  position: fixed;
  position-anchor: --carousel4;
  position-area: right center;
  translate: -50%;
  filter: drop-shadow(0px -1px 15px #aaaaaa);
}
.carousel4::scroll-button(left) {
  content: '‹';
  position-area: left center;
  translate: 50%;
}
.carousel4::scroll-button(right):disabled, .carousel4::scroll-button(left):disabled {
  opacity: 0.5;
  cursor: auto; 
}






@media(max-width: 500px) {

.card {
  
flex: 0 0,100%;

  
}



}