/* layout */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  grid-template-rows: minmax(15rem, 1fr);
  grid-auto-rows: 1fr;
  grid-gap: 1rem;
  grid-auto-flow: dense;
}

.grid--full {
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  grid-template-rows: minmax(19rem, 1fr);
}

/* styling */

.card--hidden {
  display: none !important;
}

.card--expanded {
  grid-column: span 2;
  grid-row: span 2;
}

.card {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  overflow: hidden;
}

.card > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.card__avatar {
  height: 6rem;
  width: 6rem;
  border-radius: 100%;
  background-color: hsla(0, 0%, 0%, 0.2);
  margin-bottom: 1rem;
}

.card__title {
  height: 1rem;
  width: 7rem;
  background-color: hsla(0, 0%, 0%, 0.6);
  margin-bottom: 1rem;
}

.card__description {
  height: 2rem;
  width: 11rem;
  background-color: hsla(0, 0%, 0%, 0.2);
}

.card--1 {
  background-color: #366f6e;
}

.card--2 {
  background-color: #79ac91;
}

.card--3 {
  background-color: #e2b060;
}

.card--4 {
  background-color: #e86448;
}

.card--5 {
  background-color: #dc5263;
}

body {
  background-color: #191919;
  color: lightgray;
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI",
    "Roboto", "Helvetica Neue", Arial, sans-serif;
  min-height: 200vh;
}

.mb-4 {
  margin-bottom: 1rem;
}

.p-4 {
  padding: 1rem;
}

button {
  padding: 0.5rem;
}

/* for the accordion */

.subjects {
  margin-top: 5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
  height: 100vh;
}

.subject {
  padding: 2rem;
  overflow: hidden;
  color: #191919;
}

.subject__content {
  display: none;
}

.subject:first-of-type {
  background-color: #366f6e;
}

.subject:nth-of-type(2) {
  background-color: #79ac91;
}

.subject:nth-of-type(3) {
  background-color: #e2b060;
}

.subject:nth-of-type(4) {
  background-color: #e86448;
}

.subject:nth-of-type(5) {
  background-color: #dc5263;
}

.subject--active {
  grid-column-end: span 3;
}

.subject--active .subject__content {
  display: block;
}

/* changes test */

.grid-children-change {
  display: grid;
  grid-template-columns: repeat(3, minmax(min-content, 200px));
  grid-auto-rows: fit-content(600px);
  grid-gap: 1rem;
  grid-auto-flow: dense;
  justify-content: center;
}

.card__inner {
  background-color: hsla(0, 0%, 0%, 0.6);
  /* transition: width 0.5s, height 0.5s; */
}

.card__inner--1 {
  width: 50px;
  height: 120px;
}

.card__inner--2 {
  width: 130px;
  height: 10px;
}
.card__inner--3 {
  width: 220px;
  height: 80px;
}

/* ==========================================================================
   nested grid
   ========================================================================== */

.nested-grid {
  display: grid;
  grid-auto-flow: dense;
  grid-gap: 0.5rem;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  grid-template-rows: repeat(auto-fit, minmax(2rem, 1fr));
}

.scroll-example {
  width: 500px;
  overflow-x: scroll;
  display: flex;
}

.scroll-example div {
  margin-right: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 8rem;
  flex: 0 0 100px;
}

.small {
  background-color: orange;
}

.big {
  background-color: blue;
}
