.mwrapper
{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  width: 100%;
  height: 100%;
  background: #FFF;
  overflow: hidden;
}
.mwrapper:before
{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #FFF 0%, transparent 20%, transparent 80%, #FFF 100%);
  z-index: 1;
}
.marquee
{
  display: flex;
  gap: 1400px;
  width: 200%;
}
.marquee-group
{
  display: flex;
  gap: 48px;
  width: 100%;
  animation: scroll-x 30s linear infinite;
}
.marquee-group img
{
  max-height: 70%;
  height:auto;
  color: #EDF2FB;
  font-size: 72px;
  text-align: center;
  line-height: 150px;
  filter: grayscale(100%);
  opacity: 0.5;
}


@keyframes scroll-x
{
  0%
  {
	transform: translateX(0%);
  }
  100%
  {
	transform: translateX(calc(-100% - 20px));
  }
}
.marquee-reverse .marquee-group
{
  animation-direction: reverse;
  animation-delay: -3s;
}

/*
 CSS for the main interaction
*/
.tabset > input[type="radio"] {
  position: absolute;
  left: -200vw;
}

.tabset .tab-panel {
  display: none;
}

.tabset > input:first-child:checked ~ .tab-panels > .tab-panel:first-child,
.tabset > input:nth-child(3):checked ~ .tab-panels > .tab-panel:nth-child(2),
.tabset > input:nth-child(5):checked ~ .tab-panels > .tab-panel:nth-child(3),
.tabset > input:nth-child(7):checked ~ .tab-panels > .tab-panel:nth-child(4),
.tabset > input:nth-child(9):checked ~ .tab-panels > .tab-panel:nth-child(5),
.tabset > input:nth-child(11):checked ~ .tab-panels > .tab-panel:nth-child(6) {
  display: block;
}

/*
 Styling
*/

.tabset > label {
  position: relative;
  display: inline-block;
  padding: 4px 16px;
  border: 0px solid transparent;
  border-bottom: 0;
  cursor: pointer;
  font-weight: 500;
  font-size: 13px;
  border-radius: 64px;
  color: white;
}

.tabset > label::after {
  content: "";
  position: absolute;
  left: 15px;
  bottom: 10px;
  width: 16px;
  background: #fff;
}

input:focus-visible + label {
  outline: 0px solid rgba(0,102,204,1);
  border-radius: 3px;
}

.tabset > label:hover,
.tabset > input:focus + label,
.tabset > input:checked + label {
}

.tabset > label:hover::after,
.tabset > input:focus + label::after,
.tabset > input:checked + label::after {
}

.tabset > input:checked + label {
  border: 2px solid #D2C1B6;
}

.tab-panel {
  padding: 8px 0;
  border-top: 0px solid #ccc;

}

.tabset {
  max-width: 65em;
}

@media only screen and (max-width: 600px) {
  .marquee-group
  {
    animation: scroll-x 20s linear infinite;
  }

 .marquee-group img
 {
   max-height:60%;
   color: #EDF2FB;
   font-size: 72px;
   text-align: center;
   line-height: 150px;
   filter: grayscale(100%);
   opacity: 0.5;
 }
}