html {
  scroll-behavior: smooth;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.container {
  grid-template-areas:
    "b a"
    "b c";
}

.container-title {
  grid-area: a;
  align-self: end;
}

.container-sub {
  grid-area: c;
  align-self: start;
}

.container-thumb {
  grid-area: b;
}

.container2 {
  grid-template-areas:
    "b a"
    "b c";
}

.container-title2 {
  grid-area: a;
  align-self: end;
}

.container-sub2 {
  grid-area: c;
  align-self: start;
}

.container-thumb2 {
  grid-area: b;
}

@media (max-width: 768px) {
  .container {
    display: grid;
    grid-template-areas:
      "a"
      "b"
      "c";
  }

  .container-title {
    grid-area: a;
    align-self: start;
  }

  .container-sub {
    grid-area: c;
    align-self: start;
  }

  .container-thumb {
    grid-area: b;
  }
  .container-thumb2 {
    grid-area: b;
  }
  .container-title2 {
    grid-area: a;
  }
  .container-sub2 {
    grid-area: c;
  }
  .container2 {
    display: grid;
    grid-template-areas:
      "b"
      "a"
      "c";
  }
}

@media (max-width: 484px) {
  .sm-size {
    width: 230px !important;
  }
}