.flex { display: flex; }

.flex-1 { flex: 1; }
.flex-2 { flex: 2; }
.flex-3 { flex: 3; }
.flex-4 { flex: 4; }
.flex-5 { flex: 5; }
.flex-6 { flex: 6; }
.flex-7 { flex: 7; }
.flex-8 { flex: 8; }

.article {
  padding: 0 60px 30px;
}

.bg-0 { background: var(--color0); }
.bg-1 { background: var(--color1); }
.bg-2 { background: var(--color2); }
.bg-3 { background: var(--color3); }
.bg-4 { background: var(--color4); }
.bg-5 { background: var(--color5); }
.bg-6 { background: var(--color6); }
.bg-7 { background: var(--color7); }

.c-0 { color: var(--color0); }
.c-1 { color: var(--color1); }
.c-2 { color: var(--color2); }
.c-3 { color: var(--color3); }
.c-4 { color: var(--color4); }
.c-5 { color: var(--color5); }
.c-6 { color: var(--color6); }
.c-7 { color: var(--color7); }


.info-item {
  display: flex;
  gap: 20px;
  align-items: center;
}

.info-item img {
  width: 40px;
  height:40px;
}

.social-media {
  display: flex;
  gap: 10px;
  padding: 30px 0;
  align-items: center;
}

.section {
  display: flex;
  gap: 30px 60px;
  padding: 0 0 20px;
}

.video-container {
  display: flex;
  justify-content: center;
  padding-bottom: 60px;
}

.kozadat {
  display: flex;
  padding: 68px;
}

.kozadat-fejlec {
  border-bottom: 2px solid var(--color3);
  border-radius: 32px 32px 0 0;
}

.kozadat-lablec {
  display: flex;
  border-radius: 0 0 32px 32px;
}

.kozadat-sor {
  display: flex;
  border-bottom: 2px solid var(--color3);
}

.kozadat-bal {
  flex: 2;
}

.kozadat-jobb {
  flex: 8;
}

.kozadat-jobb-tartalom {
  display: flex;
  gap: 20px;
  align-items: center;
  padding: 5px;
}

.kozadat-icon {
  width: 10px;
  color: var(--color1);
}

.textbox {
  padding: 50px;
  border-radius: 34px;
  overflow: hidden;
  height: 300px;
  position: relative;
}

.scroll-inner {
  height: 100%;
  overflow-y: auto;
  padding-right: 20px; /* helyet hagyunk a scrollbar-nak */
  scrollbar-color: var(--color8) transparent;
  scrollbar-width: thin;
}

.textbox-1 {
  padding: 30px 50px;
  border-radius: 34px;
  max-height: 300px;
  overflow-y: scroll;
  line-height: 7em;
}

.textbox-6 {
  background: var(--color6);
  color: var(--color2);
  padding: 20px;
  border-radius: 34px;
}

.imagebox img {
  width: 100%;
  height: 100%;
  max-width: 600px;
  border-radius: 34px;
}

.management {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  justify-content: center;
}

.news {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: center;
}

.card {
  background-color: var(--color4);
  border-radius: 34px;
  overflow: hidden;
  display: flex;
  flex-direction:row;
  aspect-ration: 4 / 3;
  height: 100%;
}

.card .image {
  display: flex;
  justify-content: center;
}

.card img {
  width: 100px;
  height: 100px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.card .arrow {
  display: flex;
  align-items: center;
  justify-content: center;
}

.card .arrow img {
  width: 24px;
  height: 32px;
}

.card .content {
  gap: 0;
  text-align: center;
  flex-direction: column;
}

    .card.featured {
      grid-column: 1 / -1;
      justify-self: center;
      width: 100%;
      max-width: 400px;
      aspect-ratio: auto;
      flex-direction: row;
      align-items: center;
    }

    .card.featured img {
      max-width: 150px;
      aspect-ratio: 1;
    }

    .card.featured .content {
      text-align: left;
      padding: 20px;
    }

@media (max-width: 1000px) {
  .article {
    padding: 0 10px 20px;
  }

  h1 {
    text-align: center;
  }

  .kozadat {
    flex-direction: column;
    gap: 20px;
    padding: 20px;
  }

  .section {
    flex-direction: column;
  }

  .textbox {
    padding: 25px 30px;
    max-height: unset;
  }

  .imagebox img {
    max-width: unset;
  }
  .card {
    flex: 1 1 calc(33.333% - 20px);
  }
}

@media (max-width: 700px) {
  .card, .card.featured{
    flex: 1 1 calc(50% - 20px);
  }
}

@media (max-width: 500px) {
  .card, .card.featured{
    flex: 1 1 100%;
  }
}