@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
}

html {
  height: 100%;
  width: 100%;
}

body {
  margin: 0;
  min-height: 100dvh;
  display: grid;
  place-items: center;
}

body > div:not(#break) {
  --padding: 15px;
  width: calc(550px - var(--padding)*2);
  height: calc(335px - var(--padding)*2);
  outline: solid 1px black;
  padding: var(--padding);
}

.inner {
  border: dashed 2px skyblue;
  width: 100%;
  height: 100%;
  position: relative;
}

.image {
  position: absolute;
  width: 75px;
  aspect-ratio: 1;
  border-radius: 10px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.name {
  position: absolute;
  margin-block: 0;;
  top: calc(75px + 15px);
}

.top {
  position: absolute;
  height: calc(150px - var(--padding));
  width: calc(100% - var(--padding)*2);
  top: var(--padding);
  left: var(--padding);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--padding);
  font-size: 12pt;

  & > div {
    display: flex;
    flex-direction: column;
  }
}
.top .right {
  height: 100%;
  position: relative;
  border-radius: 10px;
  overflow-y: hidden;

  & > svg {
    position: absolute;
    top: 50%;
    translate: 0 -50%;
  }
}

.bottom {
  position: absolute;
  height: calc(150px - var(--padding));
  width: calc(100% - var(--padding)*2);
  bottom: var(--padding);
  left: var(--padding);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--padding);
  font-size: 12pt;

  & > div {
    display: flex;
    flex-direction: column;
  }
}
.bottom .right {
  gap: 5px;
  justify-content: center;
  align-items: flex-end;

  & > a {
    text-decoration: none;
    color: inherit;
    width: fit-content;
    &:hover {
      color: blue;
      color: -webkit-link;
      &:visited {
        color: purple;
        color: -webkit-link-visited;
      }
    }
  }
}
.title {
  font-weight: bold;
}
.slogan {
  flex: 1;
  display: grid;
  place-items: center;
}

#back {
  overflow: hidden;
  & > .inner {
    display: grid;
    place-items: center;
  }
}


#back > .inner > svg {
  width: calc(100% - var(--padding)*6);
}

#break {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 550px;
  /* border-left: solid 1px black;
  border-right: solid 1px black; */
  display: flex;
  justify-content: center;
  align-items: center;
  
  &::before {
    content: 'Front';
    position: absolute;
    top: 25%;
    left: 50%;
    translate: -50% -50%;
    border: solid 1px black;
    border-top: none;
    padding: 10px 0 20px;
    line-height: 1;
    height: fit-content;
    width: 100%;
    text-align: center;
  }
  &::after {
    content: 'Back';
    position: absolute;
    left: 50%;
    bottom: 25%;
    translate: -50% 50%;
    border: solid 1px black;
    border-bottom: none;
    padding: 20px 0 10px;
    line-height: 1;
    height: fit-content;
    width: 100%;
    text-align: center;
  }
}