footy.css

body {
  padding: 0;
  margin: 0;
}
.osn {
  margin: 0 auto;
  width: 1250px;
  overflow: hidden;
}
.conteiner {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 80px 300px;
  background-color: black;
  height: auto;
  row-gap: 3px;
  grid-template-areas:
    "header header"
    "main aside"
    "main aside"
    "footer footer";
}
header,
aside,
main,
footer {
  background-color: aliceblue;
}
header {
  grid-area: header;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  justify-items: center;
  align-items: center;
  background-color: black;
  color: white;
}
header > div:hover {
  color: orange;
  cursor: pointer;
}

main {
  grid-area: main;
  display: grid;
  grid-template-rows: auto 1fr;
}
aside {
  grid-area: aside;
}
footer {
  grid-area: footer;
}

.swiper {
  margin-top: 10px;
  width: 900px;
  height: 400px;
}
.swiper img {
  overflow: hidden;
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.swiper-slide {
  position: relative;
}
.smallecr {
  display: none;
}
.swiper-slide span {
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0px;
  background: rgba(0, 0, 0, 0.5);
}
.slider_text {
  color: white;
  font-size: medium;
  letter-spacing: 1px;
  margin-bottom: 20px;
}
.zag_slider {
  font-size: small;
  color: orange;
  margin-left: 10px;
  margin-bottom: 45px;
}
.grid_two {
  display: grid;
  margin-left: 15px;
  padding-bottom: 20px;
  margin-bottom: 0;
  grid-template-rows: repeat(9, 60px);
}
.novosti {
  font-size: x-large;
}
.grid_two_subzag {
  font-size: small;
  font-weight: 600;
  color: green;
}
.shapka_time {
  display: flex;
  gap: 3px;
  height: 30px;
  align-items: center;
}
.time {
  font-size: small;
  color: grey;
}
.grid_two_text {
  padding: 0;
  margin: 0;
}
.grid_two_text_live::after {
  content: "Live";
  margin-left: 3px;
  display: inline-block;
  color: beige;
  width: 35px;
  height: 20px;
  text-align: center;
  background-color: lightcoral;
  border: 1px solid lightcoral;
  border-radius: 5px;
}

footer {
  display: flex;
  height: 50px;
  justify-content: center;
  background-color: black;
  color: aliceblue;
}
aside {
  display: grid;
  grid-template-rows: repeat(4, 60px 150px);
  padding-top: 10px;
  justify-items: center;
  gap: 6px;
}
table,
tr,
th,
td {
}
td,
.com {
  text-align: center;
}
.com {
  padding-left: 7px;
  text-align: left;
}
table {
  width: 300px;
}
th {
  color: gray;
  font-weight: 300;
}
.logo img {
  width: 23px;
  height: 23px;
}

@media (max-width: 1100px) {
  .osn {
    margin: 0 auto;
    width: 800px;
    overflow: hidden;
  }
  .conteiner {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 80 300px;
    /*  background-color: black;
*/
    height: auto;
    row-gap: 3px;

    grid-template-areas:
      "header header"
      "main main"
      "main main"
      "footer footer";
  }

  .swiper {
    display: none;
  }
  aside {
    display: none;
  }
}

@media (max-width: 800px) {
  .conteiner {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 80 300px;
    height: auto;
    row-gap: 3px;

    grid-template-areas:
      "header "
      "main"
      "main";
  }
  footer {
    display: none;
  }
  header {
    grid-area: header;
    display: grid;
    grid-template-columns: repeat(2, 200px);
    justify-items: center;
    align-items: center;
    color: white;
  }
  .forbig {
    display: none;
  }
  .smallecr {
    display: inline-block;
  }
}