/* Channel icon */
.channel-class {
  width: 24px;
  height: 24px;
  border: 2px solid black;
  border-radius: var(--radius-full, 9999px);
  position: relative;
  box-sizing: border-box;
}

.channel-class::after {
  content: '';
  position: absolute;
  left: 7px;
  top: 3px;
  width: 4px;
  height: 9px;
  border: solid black;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.takeupinfo-container{
  min-height: 400px;
}

.text-card,
.image-card,
.channel-card {
  min-height: 300px;
}

.takeupinfo-imageDynamic{
  display: grid;
  grid-template-columns: 2fr 1fr 1fr; /* Two equal columns */
  gap : 24px;
}

.takeupinfo-textCardDynamic{
  display: grid;
  grid-template-columns: 2fr 1fr 1fr; /* Two equal columns */
  gap : 24px;
}

.takeupinfo-channelImage{
  display: grid;
  grid-template-columns: 1fr 1fr; /* Two equal columns */
  gap : 24px;
}

.takeupinfo-channelDynamic{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap : 24px;
}

@media only screen and (min-width: 600px) and (max-width: 1199px) {



  .takeupinfo-channelDynamic{
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two equal columns */
    grid-template-rows: auto 1fr;  /* First row auto height, second row flexible */
    gap : 24px;

    .channel-card{
      grid-column: 1 / span 2; /* Span across both columns */
    }
  }




  .takeupinfo-imageDynamic{
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two equal columns */
    grid-template-rows: auto 1fr;  /* First row auto height, second row flexible */
    gap : 24px;

    .image-card{
      grid-column: 1 / span 2; /* Span across both columns */
    }
  }


  .takeupinfo-textCardDynamic{
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two equal columns */
    grid-template-rows: auto 1fr;  /* First row auto height, second row flexible */
    gap : 24px;

    .text-card{
      grid-column: 1 / span 2; /* Span across both columns */
    }
  }



}


@media only screen and (max-width: 599px) {
  
  .takeupinfo-channelImage .image-card {
    display: none;
  }

  .takeupinfo-channelDynamic{
    display: grid;
    grid-template-columns: auto; 
    gap : 24px;
    align-items: stretch;
  }

  .takeupinfo-imageDynamic{
    display: grid;
    grid-template-columns: auto; 
    gap : 24px;
    align-items: stretch;
  }

  .takeupinfo-textCardDynamic{
    display: grid;
    grid-template-columns: auto; 
    gap : 24px;
    align-items: stretch;
  }

  .takeupinfo-channelImage{
    display: grid;
    grid-template-columns: auto; /* Two equal columns */
    gap : 24px;
    .image-card, .channel-card {
      min-height: 300px;
    }
  }

  .channel-card {
    min-height: 400px;
  }


}