body {
    background: linear-gradient(-7deg, rgba(255, 162, 0, 0.4) 27%, 65%, rgb(40, 0, 90));
}

h1, h2, h3 {
    text-align: center;
}

h1.headingLight {
    color: var(--horizon-sky-light);
}

h2.headingLight,
h3.headingLight {
    color: var(--horizon-sky-subdued);
}

p {
    text-align: left;
}

#mainContent {
    padding: 2rem 10vw 4rem 10vw;
}

#mainContent > * {
    margin-top: 4rem;
}

.container > *:first-child {
    margin-top: 0 !important;
}

.container > *:last-child {
    margin-bottom: 0 !important;
}

.horizonSky {
    padding: 2rem;
    border-radius: 0.5rem;
    background: linear-gradient(-10deg, var(--horizon-sky-light), var(--horizon-sky-subdued));
}

.headingWithNote {
    margin-bottom: 0;
}

.headingNote {
    margin-top: 0;
    margin-bottom: 1.5em;
}

#superiorSponsorGrid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 4rem;
    align-items: center;
}

.sponsor > * {
    grid-row: 1;
}

.sponsorImage {
    float: left;
    margin: 0 2em 2em 0;
    width: 20%;
}

/* uprimne sam nevim jak to funguje, ale ten obtékaný obrázek zůstane ve svém divu*/
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}
@media (max-width: 650px) {

    .sponsorImage {
        float: none;
        display: block;
        margin: 0 auto 2em auto;
        width: 60%;
    }

    .clearfix::after {
        display: initial;
        clear: initial;
    }
}

.sponsorInfo {
    grid-column: 2;
}

#otherSponsorsGrid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}
/* JENÍKOVO */
.otherSponsor {
  position: relative;
  width: 40%;
  padding: 10px 0;
  min-height: 160px;
  margin: 20px 0;

  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: left;

  border: 2px solid var(--accent-color);
  border-radius: 12px;
  background-color: color-mix(in srgb, var(--secondary-color) 40%, transparent);
}
.otherSponsor > * {
  margin: 0 20px;
}
.otherSponsor > img {
  max-height: 90%;
  max-width: 30%;
  border-radius: 8px;
}
.otherSponsor > div {
  display: flex;
  flex-direction: column;
  align-items: start;
}
.otherSponsor > div > * { margin: 0; }

@media (max-width: 1200px) {
  .otherSponsor {
    width: 100%;
    flex-direction: column;
  }
  .otherSponsor > img { width: 35%; }
}