:root {
  --primary-color: #0076c6;
  --blur: 10px;
  --fs-xsm: 0.6rem;
  --fs-sm: 1rem;
  --fs-md: 1.5rem;
  --fs-lg: 2rem;
  --fs-xlg: 3rem;
  --fs-xxlg: 4rem;

  --strip-img-height-ratio: 16/9;
}

@media (max-width: 1024px) {
  :root {
    --strip-img-height-ratio: 16/9;
  }
}
@media (max-width: 768px) {
  :root {
    --strip-img-height-ratio: 16/9;
  }
}
@media (max-width: 640px) {
  :root {
    --strip-img-height-ratio: 16/9;
  }
}
@media (max-width: 480px) {
  :root {
    --strip-img-height-ratio: 16/9;
  }
}
* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

.sidebanner-grid-main-container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(5, 1fr);
}

.sidebanner-text-container {
  grid-column: 1/8;
  grid-row: 2/5;
  background-color: #e5e5e5;
  z-index: 1;
}

.sidebanner-text-container-padding {
  padding: 15px;
}

.sidebanner-img-container {
  grid-column: 7/13;
  grid-row: 1/6;
}

.sidebanner-img {
  width: 100%;
  /* min-height: 200px; */
  height: 100%;
  aspect-ratio: var(--strip-img-height-ratio);
  object-fit: cover;
}
.sidebanner-img-div {
  width: 100%;
  height: 100%;
}

@media (max-width: 640px) {
  .sidebanner-grid-main-container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(12, 1fr);
  }

  .sidebanner-text-container {
    grid-column: 2/12;
    grid-row: 5/13;
    background-color: #e5e5e5;
    z-index: 1;
  }

  .sidebanner-text-container-padding {
    padding: 15px;
  }

  .sidebanner-img-container {
    grid-column: 1/13;
    grid-row: 1/8;
  }
  .sidebanner-img-div {
    width: 100%;
    height: 100%;
  }
}