@import url("includes.css");

.special-programs {
  display: flex;
  flex-direction: column;
  gap: 2vw;
}

.special-program {
  display: flex;
  flex-direction: row;
  gap: 2vw;
}

.special-program img {
  width: min(40vw, 500px);
  object-fit: contain;
  object-position: top left;
}

.special-program .text {
  display: flex;
  flex-direction: column;
  justify-content: center;

  color: var(--theme-txt-color);
}

.special-program .text .title {
  font-size: calc(min(40vw, 500px) * 0.07);
  font-weight: bold;
}

.special-program .text .desc {
  font-size: calc(min(40vw, 500px) * 0.05);
  text-overflow: ellipsis;
}

.grid {
  display: grid;
  grid-template-columns: min(40vw, 500px) 1fr;
  gap: 2vw;

  font-size: calc(min(40vw, 500px) * 0.05);
  text-overflow: ellipsis;
}

.grid img {
  width: min(40vw, 500px);
  object-fit: contain;
  object-position: top left;
}

@media (width < 40rem) {
  .special-programs {
    gap: 4vw;
  }

  .special-program {
    flex-direction: column;
  }

  .special-program img {
    width: 100%;
  }

  .grid {
    grid-template-columns: 1fr;
    gap: unset;
  }

  .grid img {
    width: 100%;
  }

  .grid > div:nth-child(2n) {
    padding-bottom: 2vw;
  }
}