<article class="component component1">
    <img src="img/sample-image.png" alt="">
    <div class="content-right">
        <h3>Vector illustration set of rocks and stones</h3>
        <div class="author">
            by <a href="#">Lillian Beck</a>
        </div>
        <div class="actions">
            <a href="#">
                <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M5 25H25" stroke="#585971" stroke-width="1.875" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M15 17.5V5" stroke="#585971" stroke-width="1.875" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M15 17.5L20 12.5" stroke="#585971" stroke-width="1.875" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M15 17.5L10 12.5" stroke="#585971" stroke-width="1.875" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                Download
            </a>
            <a href="#">
                <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M6.25 5H11.25L15 8.75H23.75C25.1307 8.75 26.25 9.86929 26.25 11.25V21.25C26.25 22.6307 25.1307 23.75 23.75 23.75H6.25C4.86929 23.75 3.75 22.6307 3.75 21.25V7.5C3.75 6.11929 4.86929 5 6.25 5" stroke="#585971" stroke-width="1.875" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M15 12.5V20" stroke="#585971" stroke-width="1.875" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M11.25 16.25H18.75" stroke="#585971" stroke-width="1.875" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                Save to Collection
            </a>
        </div>
    </div>
</article>

<div class="divider"></div>

<aside class="component component2">
    <h3>Image size</h3>
    <ul>
        <li>
            <label class="radio">
                <input type="radio" checked name="size" value="1">
                <span class="cb"></span>
                <span class="text">Original ・3264 x 4922</span>
            </label>
        </li>
        <li>
            <label class="radio">
                <input type="radio" name="size" value="2">
                <span class="cb"></span>
                <span class="text">Large ・3264 x 4922</span>
            </label>
        </li>
        <li>
            <label class="radio">
                <input type="radio" name="size" value="3">
                <span class="cb"></span>
                <span class="text">Medium ・1280 x 1932</span>
            </label>
        </li>
        <li>
            <label class="radio">
                <input type="radio" name="size" value="4">
                <span class="cb"></span>
                <span class="text">Small ・640 x 966</span>
            </label>
        </li>
        <li>
            <label class="radio">
                <input type="radio" name="size" value="5">
                <span class="cb"></span>
                <span class="text">Custom Size</span>
            </label>
        </li>
        <li class="button">
            <button type="submit">Download</button>
        </li>
    </ul>
</aside>

<div class="divider"></div>

<div class="component component3">
    <h3>Similar keywords</h3>
    <div class="keywords">
        <a href="#">rock</a>
        <a href="#">stone</a>
        <a href="#">illustration</a>
        <a href="#">cartoon</a>
        <a href="#">geography</a>
        <a href="#" class="view-all">
            View all
            <img src="img/icon-arrow-right.svg" alt="">
        </a>
    </div>
    <ul class="stock-details">
        <li>
            <label>Category</label>
            Vector illustrations
        </li>
        <li>
            <label>License type</label>
            Standard or Extended
        </li>
    </ul>
</div>

@import url('https://fonts.googleapis.com/css2?family=Mulish:[email protected];700&display=swap');

* {
  padding: 0;
  margin: 0;
  list-style: none;
  border: 0;
  outline: 0;
  box-sizing: border-box;
  text-decoration: none;
  font-family: 'Mulish', sans-serif;
}

body {
  background: #F3F6FD;
  padding: 30px;
}

.component {
  &.component1 {
    background: #fff;
    padding: 80px;
    border-radius: 15px;
    max-width: 950px;
    display: flex;
    align-items: center;

    > img {
      margin-right: 40px;
      width: 302px;
      height: 231px;
      object-fit: cover;
    }

    .content-right {
      height: 231px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    h3 {
      font-size: 32px;
    }

    .author {
      font-size: 18px;
      color: #1A1B38;

      a {
        color: #5B60ED;
        text-decoration: underline;
      }
    }

    .actions {
      display: flex;
      margin: 0 -7px;

      a {
        height: 63px;
        display: flex;
        align-items: center;
        border: 1px solid #D4DBEE;
        border-radius: 3px;
        margin: 0 7px;
        font-size: 18px;
        color: #585971;
        justify-content: center;
        padding: 0 30px;
        white-space: nowrap;

        &:hover {
          border-color: #5B60ED;
          color: #5B60ED;

          svg path {
            stroke: #5b60ed;
          }
        }

        img, svg {
          margin-right: 10px;
        }
      }
    }
  }

  &.component2 {
    background: #fff;
    padding: 50px 60px 60px 60px;
    border-radius: 15px;
    max-width: 390px;

    h3 {
      font-size: 24px;
      padding-bottom: 25px;
    }

    ul {
      li {
        padding-bottom: 15px;

        &.button {
          padding-top: 35px;
        }

        button[type="submit"] {
          height: 63px;
          border-radius: 3px;
          background: #5B60ED;
          width: 100%;
          cursor: pointer;
          color: #fff;
          font-size: 18px;

          &:hover {
            opacity: .9;
          }
        }

        &:last-child {
          padding-bottom: 0;
        }

        .radio {
          display: flex;
          align-items: center;
          font-size: 18px;
          cursor: pointer;

          .cb {
            margin-right: 10px;
            width: 24px;
            height: 24px;
            min-width: 24px;
            border-radius: 50%;
            border: 1px solid #D4DBEE;
            position: relative;

            &::before {
              content: '';
              width: 16px;
              height: 16px;
              border-radius: 50%;
              background: #5B60ED;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              display: none;
            }
          }

          &:hover {
            .cb {
              border-color: #5B60ED;
            }
          }

          input {
            display: none;

            &:checked + .cb {
              border-color: #5B60ED;

              &::before {
                display: block;
              }
            }
          }
        }
      }
    }
  }

  &.component3 {
    background: #fff;
    padding: 55px 60px 65px 60px;
    border-radius: 15px;
    max-width: 510px;

    h3 {
      font-size: 24px;
      padding-bottom: 25px;
    }

    .keywords {
      display: flex;
      flex-wrap: wrap;

      a {
        margin-right: 10px;
        margin-bottom: 10px;
        height: 38px;
        display: flex;
        padding: 0 20px;
        border-radius: 3px;
        align-items: center;
        font-size: 14px;
        color: #585971;
        border: 1px solid #D4DBEE;

        &:hover {
          border-color: #5B60ED;
          color: #5B60ED;
        }

        &.view-all {
          background: #F3F6FD;
          border-color: #F3F6FD;
          color: #5B60ED;

          img {
            margin-left: 5px;
          }
        }
      }
    }

    .stock-details {
      margin-top: 40px;
      padding-top: 50px;
      display: flex;
      border-top: 1px solid #D4DBEE;

      li {
        flex: 1;
        font-size: 16px;
        color: #585971;

        label {
          padding-bottom: 12px;
          display: block;
          font-size: 14px;
          font-weight: bold;
        }
      }
    }
  }
}

.divider {
  height: 50px;
}