@import "../../commonFiles/navbar.css";
@import "../../commonFiles/sidebar.css";
@import "../../commonFiles/commonStyle.css";
@import "../../commonFiles/base.css";

.grid-border {
  border: 2px solid var(--light-grey-border);
  margin: 1rem;
  padding: 1.5rem;
  border-radius: 10px;
}

.grid-img-container {
  background-color: var(--red-brown);
}

.grid-img {
  max-width: 100%;
  max-height: 100%;
}

.grid-body {
  padding: 1rem;
  background-color: var(--light-grey);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.grid-content {
  display: flex;
  flex-direction: column;
  font-size: 1.2rem;
  padding-left: 3rem;
}

.grid-content ul li {
  font-size: 1rem;
  padding: 4px;
}

.grid-info {
  display: flex;
  flex-direction: column;
  position: relative;
  text-align: center;
}

.grid-icons-two,
.grid-icons {
  font-size: 1.3rem;
  position: absolute;
  top: 1px;
  right: 10px;
}

.grid-icons i {
  margin: 0 4px;
}

.grid-icons i:hover {
  color: var(--red);
}

.grid-btns i,
button {
  font-size: 1.2rem;
  color: var(--white);
  border: 1px solid var(--red-brown);
  background-color: var(--red-brown);
  padding: 12px;
  margin: 1rem;
}
/* 2 COLUMN GRID */
.grid-body-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: auto;
  width: 70%;
  padding: 1rem;
  background-color: var(--light-grey);
  display: grid;
}

.grid-icons-two {
  padding-bottom: 1rem;
}