html{
  font-size: 16px;
  font-family: Raleway, sans-serif;
  }

body{
  margin: 0;
}
.container{
  padding-left: clamp(1rem, 18.8627vw + -4.6352rem, 18rem);
  padding-right: clamp(1rem, 18.8627vw + -4.6352rem, 18rem);
  }

.img-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* dve rovnaké stĺpce */
  grid-template-areas: "first second"
                        "yt yt";
  gap: clamp(.4rem, .6316vw + .2421rem, 1rem); /* malá medzera medzi obrázkami */
  margin-top: clamp(1rem, 1.0526vw + .7368rem, 2rem);
}

.img-grid img {
  width: 100%;       /* obrázok vyplní celý stĺpec */
  height: auto;      /* zachová pomer strán */
  display: block;    /* odstráni bielu medzeru pod obrázkom */
  object-fit: cover; /* ak by si chcela orezávať pri zachovaní rámu */
}

.yt-banner-and-link{
  grid-area: yt;
}

.top-image-1{
  grid-area: first;
}

.top-image-2{
  grid-area: second;
}
.yt-link-rectangle{
  background: linear-gradient(90deg, #FF0000, #CB0044);
  font-size: clamp(1.375rem, .9154vw + 1.1015rem, 2.2rem);
  font-weight: bold;
  display: flex;
  justify-content: center;
  margin-bottom: clamp(2.5rem, 2.5vw + 2rem, 5rem);
}

.yt-link-rectangle a{
    color: white;
    padding: 1.5rem 0;
}

.yt-link-rectangle :hover, .yt-link-rectangle :active{
  color: rgb(216, 216, 216);
}

  
main h1{
    font-size: clamp(1.5rem, 3.1579vw + .7105rem, 4.5rem);
    max-width: 60rem;
    font-weight: 750;
    margin: 0;
}

.highlight{
    color: #FF0000;
}
  
.text-grid{
    display: grid;
    grid-template-columns: 0.75fr 1fr;
    font-size: clamp(.85rem, .8322vw + .6014rem, 1.6rem);
    gap: 2.2rem 2rem;
    margin: 0;
    margin-top: 2rem;
}

.text-grid p{
  width: 100%;
  margin: 0;
  
}

.bottom-img{
  margin-top: clamp(2.5rem, 2.6316vw + 1.8421rem, 5rem);
  display: flex;
  margin-bottom: clamp(3.5rem, 3.6842vw + 2.5789rem, 7rem);
}

.bottom-img img{
  width: 100%;
}

.mail1 {
  background: linear-gradient(90deg, #FF0000, #CB0044);
  color: white;
  padding-block: clamp(.75rem, .75vw + .6rem, 1.5rem);
  padding-inline: clamp(1rem, 1vw + .8rem, 2rem);
  font-size: clamp(.85rem, .8322vw + .6014rem, 1.6rem);
}

.mail2 {
  background-color: #f3f3f3;
  color: #FF0000;
  padding-block: clamp(.75rem, .75vw + .6rem, 1.5rem);
  padding-inline: clamp(1rem, 1vw + .8rem, 2rem);
  font-size: clamp(.85rem, .8322vw + .6014rem, 1.6rem);
  margin-top: 1rem;
}

@media (max-width: 500px){
  .img-grid{
    grid-template-columns: 1fr;
    grid-template-areas: "first"
                        "yt"
                        "second";
  }
  .top-image-1 img, .top-image-2 img{
    height: 12rem;
  }
  .yt-banner-and-link img{
    height: 5rem;
  }

  .yt-link-rectangle a{
    padding: 0.5rem 0;
    ;
  }
  .yt-link-rectangle{
    margin-bottom: 0;
  }

  .text-grid{
    grid-template-columns: 0.9fr;
    gap: 1rem;
  }

  .top-image-2{
    margin-bottom: 2.4rem;
  }

  .bottom-img{
    margin-top: 2.5rem;
    margin-bottom: 3.5rem;
  }
}